如何在特定的dom标签之后获取下一个图像标签，兄弟姐妹与否？答案

【问题标题】：how to get the next image tag after specific dom tag, sibling or not?如何在特定的dom标签之后获取下一个图像标签，兄弟姐妹与否？
【发布时间】：2014-04-07 19:04:53
【问题描述】：

假设代码如下

<html>
<h1>heading</h1>
<div>
  <div>
      <span>
            <img src="source"/>
       </span>
  </div>
</div>
 </html>

以上只是一个例子，它应该适用于任何 html 代码。

我需要<h1> 之后的下一个图像标签，无论img 放在哪里
$('h1').nextAll('img').first() 或$('h1').nextUntil('img').last().next() 在这里都不起作用，因为它们不是<h1> 的兄弟姐妹。有没有办法在不编写太多循环代码的情况下获得img？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

var $h1 = $("h1"); // Your `h1`
var all = $("*"); // All DOM elements

var h1idx = all.index($h1);
all.splice(0, h1idx); // Get rid of everything before and until your `h1`

var result = all.filter("img").first(); // Your first `img`

【讨论】：

投反对票者：如果您愿意发表您的想法，将对社区有所帮助。
@wolfgang 很高兴有帮助！
与您的答案无关，但为什么不是骗子？ sn-p 不能按原样使用，但大体思路不适用吗？
嗨，@Stijn。至少可以说，断言应用了一般想法 是主观的。虽然我绝对同意最佳答案有一些非常有用的线索，但这个问题不会造成重复的问题。
只是想知道..你为什么在<h1>..之前拼接出元素..只是在img上运行过滤器不起作用？

【解决方案2】：

试试

var img_after_h1 = $("* > h1 + * img");

jsfiddle http://jsfiddle.net/guest271314/T7AqX/

编辑

各种html 结构，嵌套h1 element，多个img 标签，测试用例。也适用于原始帖子中的html 结构

var img = $("h1 ~ img, h1 ~ * img, *:has(h1) + * + img, *:has(h1) ~ * img")

jsfiddle http://jsfiddle.net/guest271314/aBRjL/

【讨论】：

这是不正确的。它只会匹配h1之后元素的子元素。
在那个特定的例子中，确实如此。如果h1 后面有一个空的div 怎么办？在这种情况下它确实不工作：jsfiddle.net/gqg8V.
@Chri 好点。不知道搜索可能会进行到多“深”。来自 Chris 的分叉 jsfiddle 链接，调整后的“兄弟姐妹”选择器，将更新帖子，请参阅 jsfiddle.net/guest271314/3MZsB
@guest271314 不错。更近了，但还没有完全到那里。 ;) jsfiddle.net/tgVx8
@Chris 很有趣。上面的 jsfiddle，也许可能 a) html 结构与原帖不同； b) 不包括或引用明确的要求或定义，例如，“要求是检索 2 img src 的相邻元素或h1 元素的兄弟姐妹”？谢谢！

【解决方案3】：

$('h1').next().find('img').first()

这应该在下一个兄弟中找到下一个 img 标签

已编辑：

$('h1').nextAll().find('img').first()

这应该在所有下一个兄弟姐妹中找到下一个 img 标记

【讨论】：

这仅在<img> 是<h1> 的下一个兄弟的孩子时才有效。