如何使用jqLite通过类名选择元素？

110

我试图从我的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')

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

谢谢

骗子

angularjs angularjs-directive jqlite

— 骗子
source

ID必须是唯一的，因此通过ID查找一个元素是另一个元素的子元素是没有意义的。只需通过ID选择元素。如果您的ID不唯一，请将您的ID更改为课程。另外，您可以使用DomElement.querySelector(".myclassname")css选择器选择单个后代元素，或通过将All添加到所有元素来选择所有元素：DomElement.querySelectorAll(".myclassname")在IE <9中，这当然不起作用。

— 凯文B

如果定义a2b元素，则必须已定义指令。您可以在指令的链接函数中执行所需的操作，从而避免完全调用find（）吗？与您的类类似-您是否可以定义指令并将所需的功能放入指令的链接（或编译）函数中？

— Mark Rajcok

据说@KevinB Angular的jqLite支持“仅标记名”

— Lior

@MarkRajcok我没有定义指令。它似乎可以在IE和chrome中使用。但是即使我定义了一条指令，为什么会有帮助呢？我仍然需要掌握DOM元素。

— Lior

为什么find（'span.btn'）或类似内容对您不起作用？

— 法比

Answers:

202

本质上，由@ 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 ...>）。

— psema4
source

谢谢！从Ricardo Bin的答案中添加（Angular

— Lior

不幸的是，所引用的URL不再有效（docs.angularjs.org/guide/dev_guide.mvc.understanding_controller），并且该部分似乎没有任何替代。

— Per Quested Aronsson

不可以。angular.element（document.querySelector（'＃id'））可以替代：$（'＃id'），不适用于：elementArray.find（'＃id'）

— Broda Noel

是的-但是，正如我们发现的那样，当我们以角度构建应用程序的新零件时，有时需要将旧零件“胶带”化一段时间，直到可以对其进行更新或重构。在我们的例子中，我们需要加载一些旧的jquery / ajax数据而不修改现有的混乱，因此我们执行以下操作-$ http.get（'/ Task / GetTaskStatsByTaskId /'+ taskId）.success（function（data）{angular.element （document.querySelector（'＃userTasksContainer'））。html（data）;}）;

— 肯恩

如果elem是jqlite对象，它将是angular.element(elem[0].querySelector('.classname'));

— cleversprocket

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那样灵活，但是

— 汉娜·雷曼
source

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

— 安卡奇奇
source

尽管OP专门询问了jqLite，但对于那些使用jQuery并希望find（）与类和ID一起使用的人，此答案肯定会有所帮助。

— Matt B

需要说明的是：“如果jQuery可用，则angular.element是jQuery函数的别名。如果jQuery不可用，则angular.element委托给Angular的内置jQuery子集，称为“ jQuery lite”或jqLite。引用自：docs.angularjs.org/api/ng/function/angular.element。jqLite包含find（）。

— Kmaczek

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

如何使用jqLite通过类名选择元素？