Получить индекс родительского LI и назначить <A>href с помощью jquery

Question

Я пытаюсь получить индекс родительского li и назначить его как часть href в моем теге привязки. Прямо сейчас все, что я получаю, это href = "# tab-1" для всех моих якорей вместо # tab-1, # tab-2 и т. Д. вот мой код:

<script type="text/javascript">
$(function(){
    $('.jqueryTabs ul li a').attr("href", "#tab" + $(this).parent().index());
});
</script>
<div class="jqueryTabs">

 <ul>
  <li><a href="#">Overview</a></li>
  <li><a href="#">Details</a></li>
  <li><a href="#">Downloads</a></li>
  <li><a href="#">Video</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>

 <div id="">
 </div>
 <div id="">
 </div>
 <div id="">
 </div>
 <div id="">
 </div>
 <div id="">
 </div>

</div><!-- jqueryTabs -->

Answer 1

Вы должны пройти через якоря и для каждого из них получить индекс родительского LI:

$(function(){
    $('.jqueryTabs ul li a').each(function() {
        $(this).attr("href", "#tab" + ($(this).parent().index() + 1));
    });
});

Примечание : я добавил "+ 1" , чтобы получить "tab1", "tab2" ... index () начинается с нуля

DEMO

Answer 2

Вам нужно перебрать все выбранные a и получить значение каждого отдельного родительского элемента a, в противном случае все они получают одинаковое значение.

Попробуйте вместо этого:

$(function(){
    $('.jqueryTabs ul li a').each(function(i, elm) {
       $(this).attr("href", "#tab" + $(this).parent().index());
    });
});

Answer 3

Вы могли бы сделать

$(function(){
     $('.jqueryTabs ul li a').each(function(){
         $(this).attr("href", "#tab" + $(this).parent().index());
     });
});