在 angularJS 中查找特定元素标签答案

【问题标题】：Finding a specific element tag in angularJS在 angularJS 中查找特定元素标签
【发布时间】：2022-03-18 00:01:15
【问题描述】：

我正在使用 angularJS，并希望删除/修改特定子元素的类（谁的类/id 未知，因为它是动态添加到父元素中的）。

我知道使用 Angular 你可以这样说：

    angular.element('someknownParentClass').addClass('newClass');

但是，我想做类似的事情：

    angular.element('.someknownParentClass').find('i').addClass('newClass');

“someknownParentClass”类是分配给“a”标签的类，在该标签内，我有一个带有字形图标类的“i”标签，我想从特定函数内部对其进行更改。这个方法好像行不通。我知道 Angular 的 jqLite 有一个 children() 属性，但我有点不确定如何使用它，或者在这种情况下它是否有用，或者使用 jQuery 和 angular 可能是我最好的选择（据我所知，这与 jqLite 不同）。有什么建议吗？

【问题讨论】：

感谢@JonathanLonowski，我编辑了这篇文章，因为我最初没有注意到语法更改。至于字形，我打算先删除这个类，然后再添加一个新的，我只是决定在帖子中解释一下。

标签： javascript html angularjs dom jqlite

【解决方案1】：

我假设您在指令中执行此操作，在这种情况下您可以执行以下操作：

var elem = angular.element('.someknownParentClass');
var iElems = elem.children('i');
iElems.addClass("newClass");

如果您更熟悉 jQuery，我认为在 angular 指令中使用它不会有问题。根据文档， angular.element 是 jQuery 的别名： https://docs.angularjs.org/api/ng/function/angular.element

$('.someknownParentClass').find('i').addClass("newClass");

【讨论】：

【解决方案2】：

如果您在指令中执行操作，则不需要使用 angular.element。如果你想在代码中使用 angular.element，你最好使用 jQuery。我整理了一个示例 jsfiddle，它将指令绑定到预定义的类（some-known-parent-class）并搜索其下的所有“i”元素并向其添加 newClass 类：

var mod = angular.module("myApp", []);
mod.directive("someKnownParentClass", function () {
    return {
        restrict: "C",
        link: function (scope, element, attrs) {
            element.find("i").addClass("newClass");
        }
    }
});

这样，您可以通过使用指令进行操作来解耦直接 DOM 操作（即 angular.element）。小提琴here.

【讨论】：