Question

假设我们有以下div。例如，如果单击第二个行中的第三个项，则可以选择任何其他项 div第n个选择器，即使它们在其他行中，基于点击的项作为起点？

<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>

Answer 1

“...选择任何其他项目div与某种第n选择器......”

你可以使用:nth-child() selector来获取属于他们父母的第n个孩子的所有元素，并结合.index() method（不带参数调用）将告诉你的索引点击相对于其兄弟姐妹的项目。

一个简单的例子如下：

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

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

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

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

使用元素作为选择其他元素的基点？

1 个答案: