使用jquery获取div中的下一个元素

Question

说我们有这个HTML代码

<div id="test">
     <h2>Title</h2>
     <p>lorem ipsum</p>
</div>

这个jQuery

$("#test h2").text("Changed Title");

现在，继续下去<p>并更改文本的正确方法是什么，而不是上升到一个级别。 像next()只会寻找下一个h2，但有一些东西让兄弟姐妹独立于元素类型。像next("p");这样的东西可能吗？

Answer 1

您要查找的命令是siblings("p")

以下是您的示例，已更新：

$("#test h2").text("Changed Title").siblings('p').text('test');

Answer 2

next选择下一个元素：默认情况下，它不仅选择相同类型的元素。

$('#test h2').next();      // selects the p
$('#test h2').next('p');   // selects the p
$('#test h2').next('h2');  // does not select the p

除非您提供选择器，否则next 将选择下一个兄弟元素。因此，您可以这样做：

$('#test h2').text('Changed title').next().text('Changed text');

Answer 3

.next( 'p' )可以解决问题：

$("#test h2").text("Changed Title")
             .next( 'p' )
             .text( 'Another change' );

来自jQuery docu：

  

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

请参阅example fiddle here。

Answer 4

确切地说，您可以使用.next('p')方法执行此操作：

$("#test h2").next('p').text("...");

Answer 5

.next('p')确实会奏效。最后将它链接起来。像这样：

$('#test h2').text("Changed Title").next('p').text('I changed too');

Answer 6

$("#test h2").text("Changed Title").siblings().text("");

Answer 7

就像你建议的那样，

$("#test").next("p").text('yada');

甚至更好：

$("#test h2").text("Changed Title").next("p").text('yada');