javascript - jQuery 精简版/AngularJS : How to add a class to a single child of an element?

Question

我正在尝试使用 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>

更新:使用 AngularJS 指令添加“事件”类的工作指令。

(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()) {
              element.children().eq(index).addClass('active');
            } else {
              element.children().eq(index).removeClass('active');
            }
          });
        });

      }
    }

})();

Answer 1

简单的回答，你要做的就是这个

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

请注意 eq() 是从零开始的。所以选择第一个 child ，你最终得到这个

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

更多信息在这里:http://api.jquery.com/eq/