Выбор .index() глубоко вложенного элемента

Я хочу выбрать теги onlu внутри a по индексу, указанному в именах ссылок. Каков наилучший способ сделать это?Выбор .index() глубоко вложенного элемента

<div class="index-get"> 
    <div class="column"> 
     <a href="#">Category Title</a> 
     <ul> 
      <li><a href="#">Index 0</a></li> 
      <li><a href="#">Index 1</a></li> 
      <li><a href="#">Index 2</a></li> 
      <li><a href="#">Index 3</a></li> 
      <li><a href="#">Index 4</a></li> 
     </ul> 
    </div> 
    <div class="column"> 
     <ul> 
      <li><a href="#">Index 5</a></li> 
      <li><a href="#">Index 6</a></li> 
      <li><a href="#">Index 7</a></li> 
      <li><a href="#">Index 8</a></li> 
      <li><a href="#">Index 9</a></li> 
     </ul> 
    </div> 
</div> 

$('.index-get ul a').click(function(){ 

    var aIndex = $(this).index(); 
    console.log(aIndex); 

});

источник

2013-10-08 theorise

Не уверен, что, если вопрос достаточно ясно, но вот что-то, что может относиться к тому, что вам нужно:

$('.index-get ul a').click(function(){ 
    var aIndex = $(this).text(); 
    console.log(aIndex); 
});

И fiddle.

EDIT

Я думаю, что я, наконец, получил его на вопрос вздох ... :-) Поскольку существует только один внутри каждого родителя LI индекса тегов всегда будет 0 в вашем например, потому что индекс относится к sieblings ...

Если вы подсчитаете индекс для LI, вы можете получить лучший результат. Но имейте в виду, что индекс подсчитывается только внутри каждого родителя, поэтому для двух UL вы получите два набора LI-детей, поэтому нажмите «Индекс 1» или «Индекс 6» даст тот же результат.

New Fiddle

Еще один редактировать

На самом деле ULS являются ни sieblings и один должен идти выше в DIV и снова вниз в ULS, чтобы иметь возможность рассчитывать LI из предыдущих пунктов .. Но я думаю, это работает просто идеально для ваших нужд. Я я понял ваши потребности, что это ... ;-)

$('.index-get ul li').click(function(){ 
    var aIndex = $(this).index()+$(this).parent().parent().prev().find("ul").children().length; 
    console.log(aIndex); 
});

И fiddle.

Последнее редактирование Создание линии немного проще

var aIndex = $(this).index() + $(this).parent().parent().prev().find("ul li").length;

& (это) является элементом LI.
$ (это) .parent() является UL
$ (это) .parent(). Родитель() является ДИВ
$ (это) .parent(). parent(). prev() - все элементы sibling этого DIV (надеюсь, только там DIV и все с одним и тем же типом контента)
$ (this) .parent(). parent(). prev () .find ("ul li") все LI внутри UL внутри sibling DIVs.
$ (this) .parent(). Parent(). Prev(). Find ("ul li"). Length; количество LI в предыдущей строке.

Там вы идете. Простая логика! ;-)

И когда вы думаете, что все сделано и улажено ... Наступает еще одно редактирование !!!:-)

Я думал о решении, которое я предложил, и он в конечном итоге потерпит неудачу, если у вас есть более двух групп UL, и если вы нажмете на LI, расположенный в третьем UL или позже.

Поэтому я создал еще одно решение, которое использует .prevAll() вместо просто .prev(), но затем должно использовать .each() с функцией, чтобы скомпилировать все подсчеты всех элементов LI из предыдущих UL ,

Fiddle

Теперь я могу спать спокойно! :-)

Фабрисио

источник

2013-10-08 09:52:09 Fabricio

Ха-ха жаль, что я вижу, что вы там делали! К сожалению, индекс 5 имеет индекс() 0, а не 4. – theorise

Да. Это то, что я сказал, произойдет. Но для этого вам нужно будет пересчитать все предыдущие LI внутри предыдущих ULs sibling. – Fabricio

Я мог бы это сделать, хотя это не очень эффективный способ сделать это. – theorise

var aIndex = $('.index-get li a').index($(this));

и вы должны кэшировать $('.index-get li a') вне обработчика событий

var $lia = $('.index-get li a'); 

$lia.on('click',function() { 

     console.log($lia.index($(this))); 

    })

источник

2013-10-08 09:54:03 mikakun

Можете ли вы объяснить мне концептуальный кеш $ ('.index-get li a') внешний обработчик событий? +1 для этого –

это означает, что вы получаете доступ к dom только один раз, вы сохраняете «a» в объекте jquery, который остается в кеше jquery, и каждый раз, когда событие запускается, ваш скрипт получает доступ к кешу jquery вместо dom (быстрее) - т.е. если вы используете '$ ('li a')' в вашем обработчике, при каждом запуске ваш скрипт получает доступ к dom (медленнее) – mikakun

Спасибо за помощь ур –

Попробуйте этот код:

$('.index-get ul a').click(function(){ 
    var aIndex = $(this).text().match(/\d+$/)[0]; 
    console.log(aIndex); 
});

источник

2013-10-08 10:09:52

Это должно работать независимо от того, насколько глубоко li вложены:

var items = $('li'); 
 

 
items.on('click', function() { 
 
    var clicked_item = $(this); 
 
    
 
    items.each(function(index){ 
 
    if ($(this).is(clicked_item)){ 
 
     console.log(index); 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="index-get"> 
 
    <div class="column"> 
 
     <a href="#">Category Title</a> 
 
     <ul> 
 
      <li><a href="#">Index 0</a></li> 
 
      <li><a href="#">Index 1</a></li> 
 
      <li><a href="#">Index 2</a></li> 
 
      <li><a href="#">Index 3</a></li> 
 
      <li><a href="#">Index 4</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="column"> 
 
     <ul> 
 
      <li><a href="#">Index 5</a></li> 
 
      <li><a href="#">Index 6</a></li> 
 
      <li><a href="#">Index 7</a></li> 
 
      <li><a href="#">Index 8</a></li> 
 
      <li><a href="#">Index 9</a></li> 
 
     </ul> 
 
    </div> 
 
</div>

источник

2016-08-24 01:07:07

Выбор .index() глубоко вложенного элемента

ответ

Смежные вопросы