Question

我一直在使用以下内容来更改您点击后显示的div.my-div的宽度：

$(".my-div").click(function () {
    $(this).next().css({'width':'500px'});
});

由于我的div是相邻的，这很好用：

<div class="my-div">stuff</div>
<div class="my-div">stuff</div>
<div class="my-div">stuff</div>

但是现在结构发生了变化，因此不再相邻：

<div>
  <div class="my-div">stuff</div>
</div>
<div>
  <div>
    <div class="my-div">stuff</div>
  </div>
</div>
<div class="my-div">stuff</div>

选择同一个班级的下一个元素的最简单方法是什么？谢谢

Answer 1

jQuery将按照它们在DOM中的出现顺序返回元素。

因此，您可以缓存所有.my-div元素，使用index()^[docs]方法获取接收事件的索引，增加它并使用eq()^[docs]方法得到下一个。

var divs = $(".my-div");  // cache all of them

divs.click(function () {
    var idx = divs.index( this );  // get the index in the set of the current one
    divs.eq( idx + 1 ).css({'width':'500px'}); // get the one at the next index
});

这使您无需进行大量不必要的DOM选择和遍历。

示例： http://jsfiddle.net/VrATm/1/

编辑： 发布了错误的示例链接。固定的。

Answer 2

您可以遍历树层次结构。也就是说，您可以首先跳转到父级，然后跳到下一级，然后跳转到子级，如下所示：

$(this).parent().next().find(' > div').css({'width':'500px'});

当div不相邻时，jQuery next（）选择器

2 个答案: