如何使用jqLit​​e通过类名选择元素？

Question

如何使用jqLite通过类名选择元素？我试图从我的Angular.js应用程序中删除jquery，以使其更轻巧，而改用Angular的jqLite。但是该应用程序大量使用了jqLite不支持的find（'＃id'）和find（'。classname'），仅使用了“标签名称”（根据文档）想知道您认为改变它的最佳方法是什么。我考虑过的一种方法是创建自定义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')有什么想法吗？其他想法？

Answer 1

本质上，由@ 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'))

注意：如果要从控制器中执行此操作，则可能需要查看开发人员指南中的“正确使用控制器”部分，并将演示文稿逻辑重构为适当的指令（例如<a2b ...>） 。

Answer 2

angualr使用称为jqlite的较轻版本的jquery，这意味着它不具有jQuery的所有功能。这是angularjs文档中有关可以在jquery中使用的参考。 角度元素文档

在您的情况下，您需要找到具有ID或类名的div。您可以使用类名称

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));

}}

或者您可以通过查询选择器使用更简单的方法

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

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

它不像jQuery那样灵活，但是

Answer 3

如果elem.find()对您不起作用，请检查是否在角度脚本之前包含了JQuery脚本。