jquery nth-child 点击答案

【问题标题】：jquery nth-child clickjquery nth-child 点击
【发布时间】：2011-11-26 02:56:03
【问题描述】：

我有以下代码：

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一样获取项目编号？ eg：我点击第二个，jquery会返回2

【问题讨论】：

你在 jquery 中拼错了 nth: div:ntd-child
我猜火鸡太多了，谢谢我更新了我的答案

标签： jquery html click

【解决方案1】：

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

索引从零开始

【讨论】：

请使用var:var index = $(this).index() + 1;以避免污染全局命名空间。

【解决方案2】：

假设您想单击第 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();
     });
 });

【讨论】：

【解决方案3】：

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

});

【讨论】：

【解决方案4】：

也许有人比我更了解nth-child，但我会这样做：

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

附带说明一下，“nav”可能应该是 .nav 或 #nav 之类的东西。

【讨论】：

我得到一个错误：缺少（在形式参数之前[Break On This Error] $('nav div').click(function) {
@Jordan nav 是一个有效的 HTML5 元素。
是的，我想我只是在看到div 在nav 内部时感到困惑。通常我会输入a 或ul/lis，否则你也可以使用任何其他旧的非语义标签。