如何使用javascript或jquery获取特定DOM元素之后的第一个图像标记？

假设我有这样的代码

<h1>Big heading</h1>
<p>small heading</p>
<img src="image.com"/>
.........

大标题
小标题

.........

如何使用javascript或jquery在

之后获得第一个

img

标记？

试试这个

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

---

快乐编码：）

您可以使用

nextUntil（）

，然后使用

next（）

获取下一个元素，即图像

$('h1').nextUntil('img').last().next()

或者

nextAll（）

然后

first（）

---

如果要在任何

h1

元素之后使用后续图像元素中的第一个，可以将与结合使用：

---

如果希望后续图像元素中的第一个位于每个

h1

元素之后，则需要使用更高级的选择：

var $imgs = $();
$('h1').each(function () {
    $img = $(this).nextAll('img').first();
    $imgs = $imgs.add($img);
});

使用原始JS进行相同搜索的代码要多得多，但性能更高，因为我们可以进行大量优化，以减少迭代次数：

function firstImagesAfterHeadings() {
    "use strict";
    var nodeName,
        headings,
        images,
        image,
        ctx,
        i;

    //get all the headings on the page
    headings = document.getElementsByTagName('h1');

    //create a container for the images that are selected
    images = [];

    //iterate through all the headings
    for (i = 0; i < headings.length; i += 1) {
        //start at the heading
        ctx = headings[i];

        //clear out any existing selected images
        image = null;

        //walk through each of the headings' siblings
        //the assignment here is intentional,
        //the second set of parenthesis is used to acknowledge this
        //additionally, the "outer" label is used so that breaking
        //out of the switch also breaks out of the loop
        outer:while ( (ctx = ctx.nextSibling) ) {
            //normalize the node name
            nodeName = ctx.nodeName.toLowerCase();

            switch (nodeName) {
                //the first image found after the heading should
                //be added to the collection
                case 'img':
                    image = ctx;
                    break outer;
                //any headings found after the initial heading should break
                //because they will have been in the headings collection and
                //will be used as a search context on the next iteration of
                // the for loop
                case 'h1':
                    break outer;
            }
        }

        //it's possible that an image is never found,
        //or that a heading is found first
        if (image) {
            images.push(image);
        }
    }
    return images;
}

函数firstImagesAfterHeadings（）{
“严格使用”；
var nodeName，
标题，
图像，
形象,，
ctx，
我
//获取页面上的所有标题
标题=document.getElementsByTagName（'h1'）；
//为选定的图像创建一个容器
图像=[]；
//反复浏览所有标题
对于（i=0；i

---

在这里，您可以使用纯javaScript，如：-

这将提供第一个

h1

标记的第一个图像

var h1Tag = document.getElementsByTagName('h1')[0];
var imgTags = h1Tag.getElementsByTagName('img');
var firstImg = imgTags[0]; //provide the first img after h1 tag

---

或者，您可以提供更多的html结构，然后我们可以使用父元素作为标识符……这将在最后一个

h1

元素中找到第一个图像，但在

h1

元素之后找不到图像。@zzzzBov，现在可以了吗？和以前一样的问题，您正在搜索

h1

元素的后代，而没有找到后续的同级元素。

function firstImagesAfterHeadings() {
    "use strict";
    var nodeName,
        headings,
        images,
        image,
        ctx,
        i;

    //get all the headings on the page
    headings = document.getElementsByTagName('h1');

    //create a container for the images that are selected
    images = [];

    //iterate through all the headings
    for (i = 0; i < headings.length; i += 1) {
        //start at the heading
        ctx = headings[i];

        //clear out any existing selected images
        image = null;

        //walk through each of the headings' siblings
        //the assignment here is intentional,
        //the second set of parenthesis is used to acknowledge this
        //additionally, the "outer" label is used so that breaking
        //out of the switch also breaks out of the loop
        outer:while ( (ctx = ctx.nextSibling) ) {
            //normalize the node name
            nodeName = ctx.nodeName.toLowerCase();

            switch (nodeName) {
                //the first image found after the heading should
                //be added to the collection
                case 'img':
                    image = ctx;
                    break outer;
                //any headings found after the initial heading should break
                //because they will have been in the headings collection and
                //will be used as a search context on the next iteration of
                // the for loop
                case 'h1':
                    break outer;
            }
        }

        //it's possible that an image is never found,
        //or that a heading is found first
        if (image) {
            images.push(image);
        }
    }
    return images;
}

var h1Tag = document.getElementsByTagName('h1')[0];
var imgTags = h1Tag.getElementsByTagName('img');
var firstImg = imgTags[0]; //provide the first img after h1 tag

 use the following line to check the img:

  $('h1').nextAll('img:first');