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

【问题标题】：How to select an element by classname using jqLite?如何使用 jqLite 按类名选择元素？
【发布时间】：2013-06-21 10:41:03
【问题描述】：

我正在尝试从我的 Angular.js 应用程序中删除 jquery 以使其更轻，并改用 Angular 的 jqLite。但是该应用大量使用了 jqLite 不支持的 find('#id') 和 find('.classname')，只有 'tag names'（根据文档）

想知道您认为改变它的最佳方法是什么。我想到的一种方法是创建自定义 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')

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

谢谢

里尔

【问题讨论】：

ID 必须是唯一的，因此通过 ID 查找另一个元素的子元素是没有意义的。只需按 ID 选择元素。如果您的 ID 不是唯一的，请将您的 ID 更改为一个类。此外，您可以使用 DomElement.querySelector(".myclassname") 使用 css 选择器选择单个后代元素，或者通过将 All 添加到它来选择所有匹配：DomElement.querySelectorAll(".myclassname") 这当然在 IE 中不起作用
如果你定义了一个a2b 元素，你必须已经定义了一个指令。你能在指令的链接函数中做需要做的事情，从而完全避免调用 find() 吗？与你的类类似——你能定义指令并将你需要的功能放入指令的链接（或编译）函数中吗？
@KevinB Angular 的 jqLite 据说支持“仅标签名称”
@MarkRajcok 我没有定义指令。它似乎适用于 IE 和 chrome。但即使我会定义一个指令，它为什么会有所帮助？我仍然需要掌握一个 DOM 元素。
为什么 find('span.btn') 或类似的东西对你不起作用？

标签： angularjs angularjs-directive jqlite

【解决方案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'))

注意：如果您希望通过控制器执行此操作，您可能需要查看 developers guide 中的“正确使用控制器”部分并将您的演示逻辑重构为适当的指令（例如）。

【讨论】：

谢谢！要从 Ricardo Bin 答案（角度的邮件列表）添加，也可以使用 $document injectionable：jsfiddle.net/ricardohbin/fTQcs
很遗憾，所引用的 URL 不再有效 (docs.angularjs.org/guide/dev_guide.mvc.understanding_controller)，并且该部分中似乎没有任何替代。
没有。 angular.element(document.querySelector('#id')) 是：$('#id') 的替代品，而不是：elementArray.find('#id')
是的 - 但正如我们发现的那样，当我们以 Angular 构建应用程序的新部分时，我们有时需要将旧部分“胶带”一段时间，直到它们可以更新或重构。在我们的例子中，我们需要在不修改现有混乱的情况下加载一些旧的 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'));

【解决方案2】：

angualr 使用称为 jqlite 的轻量级 jquery 版本，这意味着它不具备 jQuery 的所有功能。这是 angularjs 文档中关于您可以从 jquery 使用什么的参考。 Angular Element docs

在您的情况下，您需要找到一个带有 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那么灵活，但是

【讨论】：

【解决方案3】：

如果 elem.find() 不适合您，请检查您是否包含 JQuery 脚本 before 角度脚本....

【讨论】：

虽然 OP 专门询问了 jqLite，但对于那些使用 jQuery 并期望 find() 也可以使用类和 ID 的人来说，这个答案肯定会有所帮助。
澄清：“如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，则 angular.element 委托给 Angular 的内置 jQuery 子集，称为“jQuery精简版“或 jqLite。”。引用自：docs.angularjs.org/api/ng/function/angular.element。 jqLite 包含 find()。