在 jQuery 中获取下一个兄弟的最干净的方法答案

【问题标题】：Cleanest way to get the next sibling in jQuery在 jQuery 中获取下一个兄弟的最干净的方法
【发布时间】：2011-09-08 10:09:00
【问题描述】：

http://jsfiddle.net/mplungjan/H9Raz/

在对 next('a') 等进行了相当多的测试之后，我终于找到了一个可行的方法。我只是想知道为什么 next('a') 没有，或者最接近或类似。在我单击复选框后，是否有更简洁的方法可以获取链接的 href？

$('form input:checkbox').click(function () {
 alert($(this).nextAll('a').attr("href"));
});

<form>
  <div>
    <input type="checkbox" name="checkThis" value="http://www.google.com" />Check here<br/>
    <a href="http://www.google.com">click here</a><br>   
    <input type="checkbox" name="checkThis" value="http://www.bing.com" />Check here<br/>
    <a href="http://www.bing.com">click here</a>       
  </div>
</form>

【问题讨论】：

您不能使用next()，因为<br> 元素会妨碍您。所以，就我所知，nextAll() 确实是最好的解决方案。
这当然也有效。但是更hackier并且需要
标签。 jsfiddle.net/AFFr3
@mplungjan 您可以通过将 ANCHOR 或 INPUT（或两者）声明为块级元素（当然，仅在本地，而不是整个页面）来放弃 BR 元素。这将是我的建议... 现场演示： jsfiddle.net/H9Raz/4
@Fred @Arend，但我使用了next("a") - 应该忽略我认为的 br！
@Andy：你添加了一个 lang:html 的东西——很有趣。会尽量记住这一点。

标签： jquery jquery-selectors

【解决方案1】：

详细说明上面的cmets：

你不能写：

next("a")，因为next() 只尝试匹配下一个元素。它将命中<br> 元素并且不匹配任何内容。
closest("a") ，因为 closest() 从元素本身开始沿着祖先链向上走，因此会错过 <a> 元素。

你可以写：

next().next()，正如阿伦德建议的那样。这可能是最快的解决方案，但它使<br> 元素成为强制性的。
nextAll("a")，但这可以返回多个元素（并且将在您的标记示例中这样做）。链接到first() 会阻止它，但nextAll() 仍然必须遍历所有下一个兄弟姐妹，这可能会使其变慢，具体取决于<div> 元素中标记的复杂性。
nextUntil("a").last().next()，它只遍历下一个兄弟元素，直到找到链接，然后返回匹配的最后一个元素的直接下一个兄弟元素。它可能会比nextAll() 更快，这取决于您的标记。

【讨论】：

@mplungjan，确实如此，但它还具有仅匹配单个 <a> 元素的优点，鉴于您的标记结构，您可能需要它:)
有趣的是，jQuery 并不介意我通过 nextAll("a").attr("href") 访问 nextAll 中的第一个 - 似乎它有一个“做我想做的事，而不是我说的我想要”;) 处理器
@mplungjan，是的，jQuery 在本质上是相当宽松的。回想起来，让 getter 方法只从第一个匹配元素中获取值是一个非常好的设计决策（替代方法是返回一个值数组，每个匹配元素一个，无论如何都可以通过map() 轻松实现） .
做了一个非常快速的 jsperf 测试以确认最后两个示例的性能jsperf.com/js-sibling-select-test

【解决方案2】：

或者，您可以只使用 jQuery 内置函数 .siblings()

https://api.jquery.com/siblings/

【讨论】：

选择所有匹配的兄弟姐妹，而不仅仅是下一个匹配的兄弟姐妹。

【解决方案3】：

以下代码对我有用

$('#id ~ iframe');

【讨论】：

这是对上述问题的回答吗？
也许相邻的+ 可能更相关。无论哪种情况，这都是从某个地方而不是相对于复选框对 Dom 的新访问。您的选择器未访问单击复选框旁边的锚