Поиск индекса строки с помощью jQuery

#javascript #jquery

Вопрос:

 <div class="parent">
  <div class="formRow js-TextBox"><a></div>  <------ index 0
  <div class="formRow js-Image"><a></div> <------ index 1
  <div class="formRow js-TextBox"><a></div><------ index 2
  <div class="formRow js-ImageList"><------ index 3
  <div class="formRow js-Image"><a></div> <-- **This should return 3 but is returning 4 because I search index on the basis of formRow**
</div>

Код для поиска formRow индекса

 var parent = $(this).parents("div.formRow");
var rowIndex = parent.parent().find("div.formRow").index(parent);

Пожалуйста, обратитесь к приведенному выше коду и посоветуйте, как я могу найти индекс, formRow для которого я нажал на элемент привязки a .

Проблема в том, что последняя строка формы содержит другую formRow , но мне нужен индекс родительской строки формы.

1. информация не полная?? this относится здесь к какому элементу??

2. @diEcho — Я думаю, что это выбранный элемент — тег

3. «this» — это тег привязки, на который был нажат

4. Вы бы просто позвонили $(this).parent().index() . Но вы не сможете получить 3 для последней строки, если не выполните дальнейшую проверку в DOM-дереве, чтобы увидеть, есть ли другой formrow родитель

5. Возможно, было бы лучше вместо этого привязать обработчик события click к разделам…. что вы делаете в обработчике событий? Какова цель ссылок?

Ответ №1:

Я бы устранил двусмысленность и предоставил элементу номер строки во время рендеринга, т.Е.

 <div class="formRow js-TextBox" id="row<%= rownumber %>"><a></div>

Или в качестве идентификатора привязки:

 <div class="formRow js-TextBox"><a id="row<%= rownumber %>"></div>

Существует множество способов подойти к этому. Я всегда нахожу, что если что-то кажется сложным, то я подхожу к этому с неправильного направления (или просто неправильно).

Ответ №2:

Можете ли вы изменить вышесказанное — я бы добавил другой css-класс — primaryRow к первым трем и использовал его вместо formRow в выражении jQuery

ХОРОШО — запускаем этот код:

  $('.parent > div').addClass('primaryRow');

чтобы добавить класс.

Затем

  var rowIndex = $('.primaryRow').index($(this).parents().find('.primaryRow'));

Ответ №3:

Это работает.

 $('a').click(function(){
var i = $(this).parents('.parent > .formRow').index('.parent > .formRow');
alert(i);
    return false;
});

Проверьте это: jsfiddle