Question

我有以下HTML

<div class="test">Click Me</div>
<div class="something">hello</div>
<div class="yes">yes!</div>
<div class="taco">stackoverflow</div>
<div class="super">Whatever</div>

如何使用jQuery点击$('div.test')并使用单个选择器更改$('div.super')的HTML？

我曾经认为我必须这样做：

$('div.test').click(function(){
  $(this).next().next().next().next().html("hello world!");
});

但是next()文档说它可以选择一个选择器，如下所示：

.next([selector])

所以我想也许我可以这样做：

$('div.test').click(function(){
  $(this).next('.super').html("hello world!");
});

但这似乎没有找到任何东西。我究竟做错了什么。我是否误解了next()方法中选择器的用法？

Answer 1

将.next('.super')更改为.siblings('.super')。

next method，当给定选择器时，如果匹配选择器，将匹配下一个兄弟。它没有找到与选择器匹配的下一个兄弟。

siblings method将找到与传递给它的选择器匹配的所有兄弟姐妹。

Answer 2

您正在寻找nextAll()，可能还有siblings()。

Answer 3

试试这个：

$('div.test').click(function(){
  $(this).siblings('.super').html("hello world!");
});

http://jsfiddle.net/X36c8/1/

Answer 4

使用兄弟姐妹功能。

$('div.test').click(function(){
  $(this).siblings(".super").html("hello world!");
});

jQuery如何找到一个不相邻的兄弟？

4 个答案: