Question

让我们说代码如

<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？

Answer 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`

Answer 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/

Answer 3

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

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

编辑：

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

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

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

3 个答案: