How To Get The Next Image Tag After Specific Dom Tag, Sibling Or Not?

Let's say for code such as

heading

Solution 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 anduntil your `h1`

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

Solution 2:

Try

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

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

Edit

Varied html structures, nested h1element, multiple img tags, test-cases. Work for html structure from original post, as well

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

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

Solution 3:

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

This should find next img tag in the next sibling

---

Edited:

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

This should find next img tag in all of next siblings

Share