如何使用 jqLite 按照类名选择元素？

我试图从我的 Angular.js 应用程序中删除 jquery，以使其更轻便，并将 Angular 的 jqLite 代替。但是这个应用程序大量使用 find (’# id’)和 find (’。“ classname”) ，jqLite 不支持，只支持“标记名称”(根据文档)

我想知道你觉得怎样才是改变它的最好方法。我考虑的一种方法是创建自定义 HTML 标记。例如: 改变
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

到

<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>

还有

$element.find('#add-to-bag')

到

$element.find('a2b')

有什么想法吗，其他想法？

谢谢

骗子

149867 次浏览
小开
最佳答案

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 <a2b ...>).

小开

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

小开

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


提交答案