How to select an element by classname using jqLite

Question

I m trying to remove jquery from my Angular js app in order to make it lighter  and put Angular s jqLite instead  But the app makes heavy use of find   id   and find    classname    which are not supported by jqLite  only  tag names   as per documentation   wondered what do u feel would be the best approach to change it  One approach I thought about is to create custom HTML tags  for example  change       lt span class  btn btn-large  id  add-to-bag  gt Add to bag lt  span gt   to     lt a2b style  display none   gt  lt span class  btn btn-large   gt Add to bag lt  span gt  lt  a2b gt    and    element find   add-to-bag      to   element find  a2b     Any thoughts  other ideas   thanks  Lior

User · Answer

angualr uses the lighter version of jquery called as jqlite which means it doesnt have all the features of jQuery. here is a reference in angularjs docs about what you can use from jquery. Angular Element docs

In your case you need to find a div with ID or class name. for class name you can use

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

or you can use much simpler way by query selector

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

it is not as flexible as jQuery but what

User · Answer

Essentially  and as-noted by  kevin-b      find   id   angular element document querySelector   id       find   classname    assumes you already have the starting elem to search from angular element elem querySelector   classname      Note  If you re looking to do this from your controllers you may want to have a look at the  Using Controllers Correctly  section in the developers guide and refactor your presentation logic into appropriate directives  such as  lt a2b     gt

User · Answer

If elem find   is not working for you  check that you are including JQuery script before angular script

[angularjs] How to select an element by classname using jqLite?

Examples related to angularjs

Examples related to angularjs-directive

Examples related to jqlite