jquery nth-child click

Question

У меня есть следующий код:

css:

nav div:nth-child(1) { background: red; }
nav div:nth-child(2) { background: blue; }
nav div:nth-child(3) { background: yellow; }

html:

<nav>
 <div>item #1</div>
 <div>item #2</div>
 <div>item #3</div>
</nav>

jquery:

  $(document).ready(function() {

      $('.nav div:nth-child').click(function) {
          console.log(this);
      });

  });

edit: я получаю сейчас: необработанное исключение: синтаксическая ошибка, нераспознанное выражение:: nth-child

Как нажать на nth-child, используя jquery, и получить номер элементакак CSS делают?например: я нажимаю на второй, jquery вернет 2

Answer 1

$(document).ready(function() {
  $('.nav div').click(function() {
      var index = $(this).index();
      console.log(index);
  });
});

индекс начинается с нуля

Answer 2

Скажем, вы хотите нажать Nth of 1; ist и сделать что-то с Nth другого списка. Вам нужно будет использовать.

 $(document).ready(function() {
     $(".nav div").on("click", function() {
          var index = $(this).index();
          console.log(index); // Zero Based
          $(".other-nav div:nth-child(" + (parseInt(index) + 1) + ")").show();
     });
 });

Answer 3

Возможно, кто-то знает n-го ребенка больше, чем я, но я бы поступил так:

$('nav div').click(function() {
    var index = $('div').index($(this).parents('div'));
});

В качестве примечания, "nav", вероятно, должен быть чем-то вроде .nav или # nav.

Answer 4

"nav div: nth-child (123)" - это селектор jQuery , который применим только в том случае, если вы хотите специально выбрать один.Скажем, например, что вы хотели обрабатывать каждый щелчок полностью независимо, как вы это делаете с CSS (три правила, три .click ()).

Вы хотите просто выбрать все навигационные div, но затем вычислитегде он находится в положении.Вы можете сделать это, вычтя количество элементов на количество элементов после выбранного:

$(document).ready(function() {

    $('nav div').click(function() {
        var nth_child = $(this).parent().children().length - $(this).nextAll().length;
        console.log(nth_child);
    });

});