1

假设我们有以下 div。例如，如果单击第二行中的第三个项目，则可以根据单击的项目作为开始，选择具有某种类型的第 n 个选择器的任何其他项目div，即使它们在其他行中观点？

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
4

1 回答 1

1

“...使用某种类型的第 n 个选择器选择任何其他项目 div...”

好吧，您可以使用:nth-child()选择器来获取所有属于其父级的第 n 个子级的元素，结合该.index()方法（不带参数调用）将告诉您单击的项目相对于其兄弟姐妹的索引。

一个简单的例子如下：

var $items = $(".item").click(function () {
    $items.removeClass("selected")
          .filter(":nth-child(" + ($(this).index() + 1) + ")")
          .addClass("selected");
});

演示：http: //jsfiddle.net/HPptK/

请注意，该.index()方法为您提供了一个从零开始的索引，但从:nth-child()一开始计数。

我的简单示例选择了所有第 n 个项目，包括单击的项目，但如果需要，您可以使用该.not()方法将其排除（在我上面的示例中，您将.not(this)在 之后添加.filter()）。

于 2013-09-01T11:27:29.013 回答