Jquery nth-child click

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

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);
      });

  });

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

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

Ответ 1

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

индекс основан на нулевом значении

Ответ 2

"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);
    });

});

Ответ 3

Возможно, кто-то знает nth-child больше меня, но способ, которым я это сделаю, выглядит так:

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

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

Ответ 4

Предположим, вы хотите нажать 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();
     });
 });