Блог

Главная - Вопросы по программированию - Получить индекс элемента click

Получить индекс элемента click

#javascript #angularjs #angularjs-directive #scope #angularjs-scope

#javascript #angularjs #angularjs-директива #область видимости #angularjs-область

Вопрос:

Я пытаюсь получить индекс элемента click, но продолжаю входить -1 в консоль. Я использую Array.prototype , чтобы получить indexOf из nodelist

HTML:

 <div ng-app='app' ng-controller='mainCtrl'>
  <div app-click="">
    <div ng-repeat="json in myJson">
      <li>{{json}}</li>
    </div>
  </div>
</div>

JS:

 .directive('appClick', function() {
  return {
    restrict: 'A',
    scope: true,
    controller: function($scope, $element) {
      $element.bind("click",function(e){
            var index = Array.prototype.indexOf.call($element.children(), e.target);
          console.log(index);
      });
    }
  }
});

Демонстрация JSFiddle

Ответ №1:

Другой вариант — установить индекс

 <div ng-app='app' ng-controller='mainCtrl'>
  <div app-click="">
    <div ng-repeat="json in myJson">
      <li data-index="{{$index}}">{{json}}</li>
    </div>
  </div>
</div>

и прочитать его в щелчке

 e.target.dataset.index

Комментарии:

1. Должен был подумать об этом! Спасибо.

2. это приводит к другому поведению при нажатии клавиши.. если я хочу, чтобы клавиша ввода имела то же поведение, что и щелчок… Я получаю неопределенный, когда нажимаю enter, но правильный e.target при нажатии

3. Как у li есть нажатие клавиши?

4. если я перейду к нему … и нажму enter… Я настроил tabindexes для своего контейнера и его дочерних элементов

5. итак, что такое e.target? Проблема не в индексе, проблема заключается в том, как вы связали событие.

Ответ №2:

e.target возвращает элемент li,$element.children() возвращает div список не li
попробуйте этот код:

 var index = Array.prototype.indexOf.call($element.find("li"), e.target);
  

 angular.module('app', []).controller('mainCtrl', function($scope) {
  $scope.myJson = ["mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9"]
})

.directive('appClick', function() {
  return {
    restrict: 'A',
    scope: true,
    controller: function($scope, $element) {
      $element.bind("click",function(e){
      		var index = Array.prototype.indexOf.call($element.find("li"), e.target);
          console.log(index);
      });
    }
  }
});  
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
  <div app-click="">
    <div ng-repeat="json in myJson">
      <li>{{json}}</li>
    </div>
  </div>
</div>

Комментарии:

1. Один вопрос. Что делать, если у меня несколько li, и я хочу перейти к определенному li с class=»list1″

2. А также … можете ли вы объяснить, почему $element.children() не работает?

3. Вы можете использовать .find("li[class='list1']") , чтобы узнать элемент

4. @user4756836 $element.children() возвращает div не список li , а e.target возвращает элемент li