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

  });

编辑我现在开始：未捕获的异常：语法错误，无法识别的表达式:: nth-child

如何使用jquery点击nth-child并获取像CSS这样的项目编号？例如：我点击第二个，jquery将返回2

Answer 1

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

指数从零开始

Answer 2

＆＃34; nav div：nth-child（123）＆＃34;是一个jQuery 选择器，仅当您想要专门选择一个时才适用。比如说，您想要完全独立地处理每次点击，就像使用CSS一样（三个规则，三个.click（）＆＃39; s。）

您只想选择所有导航分组，然后找出它所处的位置。您可以通过在所选元素之后减去元素数量来实现此目的：

$(document).ready(function() {

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

});

Answer 3

也许有人比我更了解nth-child，但我这样做的方式是这样的：

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

作为旁注，“nav”可能应该是.nav或#nav。

Answer 4

假设您要单击N的第1个; ist并对另一个列表的第N个执行某些操作。你需要使用。

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

jquery nth-child点击

4 个答案: