Javascript jQuery Lite/AngularJS：如何将类添加到元素的单个子级？

我试图使用AngularJS的jQuery Lite库向元素添加一个活动类，但遇到了问题

我希望我能做一些像

element.children（）[index].addClass（'active'）但是，返回以下错误：

TypeError:element.children（…）[index].addClass不是函数

有没有办法将类添加到元素的单个子级

(function() {

'use strict';

angular
    .module('rugapp')
    .directive('menu', menu);

    menu.$inject = ['$location'];

    function menu($location) {
      return {
        restrict: 'A',
        link: link
      };

      function link(scope, element) {

        scope.$on('$routeChangeSuccess', function() {
          angular.forEach(element.children(), function(link, index) {
            if (link.hash.replace('#', '') === $location.path()) {
              console.log("Make " + $location.path() + " active!!!");
              console.log(element.children()[index]);
              // element.children()[index].addClass('class');
            }
          });
        });

      }
    }

})();

为完整起见，本指令的适用方式如下：

<div class="list-group" menu>
  <a href="app/#/" class="list-group-item">Home</a>
  <a href="app/#/link1" class="list-group-item">Link1</a>
  <a href="app/#/link2" class="list-group-item">Link2</a>
  ....
</div>

简单的回答，你想做的是

element.children().eq(index).addClass('active');

请注意，eq（）是基于零的。因此，选择第一个子项，您将得到以下结果

element.children().eq(0).addClass('active');

更多信息请点击此处：
简单回答，您要做的就是

element.children().eq(index).addClass('active');

请注意，eq（）是基于零的。因此，选择第一个子项，您将得到以下结果

element.children().eq(0).addClass('active');

此处的更多信息：
枚举子DOM元素并查找/提取链接到不同“路由”的锚（我假设您在此处使用路由，尽管这并不重要）的想法非常易变。更不用说，假设（正如您的方法所建议的）只有
does（）。显然，它只适用于
ui.router
，但思想是一样的：它根据匹配的“状态”将“活动”样式应用于每个指令

因此，您的概念解决方案可以是：

.directive("menuActive", function($location, $interpolate){
  return {
    restrict: "A",
    link: function(scope, element, attrs){

      var activeClass = $interpolate(attrs.menuActive)(scope);

      // for simplicity of example, I assume that it only applies 
      // to <a href="url#hash">, but you could make it generic
      if (element[0].tagName !== "A") return;
      var link = element[0];

      $scope.$on("$routeChangeSuccess", function()
        if (link.hash.replace('#', '') === $location.path()){
           element.addClass(activeClass);
        } else {
           element.removeClass(activeClass);
        }
    }
  }
});

指令（“menuActive”，函数（$location，$interpolate）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var activeClass=$interpolate（attrs.menuActive）（范围）；
//为了简单起见，我假设它只适用于
//到
....
枚举子DOM元素并查找/提取链接到不同“路由”的锚（我假设您在这里使用路由，尽管这并不重要）的想法非常易变。更不用说假设（正如您的方法所建议的）只有
会（）显然，它只适用于
ui.router
，但思想是一样的：它根据匹配的“状态”对每个指令应用“活动”样式

因此，您的概念解决方案可以是：

.directive("menuActive", function($location, $interpolate){
  return {
    restrict: "A",
    link: function(scope, element, attrs){

      var activeClass = $interpolate(attrs.menuActive)(scope);

      // for simplicity of example, I assume that it only applies 
      // to <a href="url#hash">, but you could make it generic
      if (element[0].tagName !== "A") return;
      var link = element[0];

      $scope.$on("$routeChangeSuccess", function()
        if (link.hash.replace('#', '') === $location.path()){
           element.addClass(activeClass);
        } else {
           element.removeClass(activeClass);
        }
    }
  }
});

指令（“menuActive”，函数（$location，$interpolate）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var activeClass=$interpolate（attrs.menuActive）（范围）；
//为了简单起见，我假设它只适用于
//到
....
这是一个非常易变的解决方案-如果出于造型目的，我想添加
|
（例如）-这将立即破坏此解决方案@RaphaelRafatpanah@NewDev，很有趣。有没有办法限制上面的语句只包含
a
元素？@RaphaelRafatpanah，即使这是易变的。如果你想更改它
，或者如果你有另一个
与导航无关呢？这是一个相当易变的问题le解决方案-如果出于造型目的，我想添加
|
（例如）-这将立即破坏此解决方案@RaphaelRafatpanah@NewDev，很有意思。有没有办法将上述语句限制为只包含
a
元素？@RaphaelRafatpanah，即使这是易变的。如果您想更改它
，或者如果您有另一个
与导航无关，该怎么办？谢谢您的回复规划。更简单的可能是只使用ng类。@jme11，这是可能的，但几乎不容易…只有当某些内容与位置匹配时，才需要激活类-这样您才能在
ng类中拥有一些逻辑，但这会污染视图谢谢您的解释。更简单的可能是只使用ng类。@jme11，这是可能的，但几乎不容易…您只需要在某些内容与位置匹配时激活类-这样您就可以在
ng class
中拥有一些逻辑，但这会污染视图