gpt4 book ai didi

jquery - 如何使用 jQuery 获取特定元素后找到的第一个元素 "further in the DOM"

转载 作者:行者123 更新时间:2023-12-01 07:41:32 25 4
gpt4 key购买 nike

我正在尝试使用 jQuery 选择页面上的第一个标题。找到该元素后,我想要在该元素之后找到的第一个图像标签。

有很多有用的函数可以遍历 DOM。然而,看起来他们只能找到“在同一父标签中”或“同级” header 的元素。

我准备了这个示例,但 html 可能完全不同:

<img id="img-one" src="random.png" />
<div>
<h1>Here is the title</h1>
</div>
<div>
<div>
<div>
<img id="img-two" src="random.png" />
</div>
</div>
</div>
<div>
<div>
<img id="img-three" src="random.png" />
</div>
</div>

我在这里找到标题 $("h1").first(),现在我需要在该标题之后出现第一个 img 标签,在本例中为“img-two”。

另外:我放置的随机 div 的嵌套可能完全不同,因此我不能使用 .parent().next("div") 之类的东西。 ...,它必须更通用。

我的第一个想法是,可能有一个函数可以为您提供整个 DOM 上全局元素的索引。在这种情况下,我可以获得 h1 的索引和所有 img 标签的索引,然后比较哪一个图像索引更大并且最接近 h1 的索引。

是否有这样的功能或者是否有其他我可能错过的选择器?

这是一个可以使用的codepen设置:https://codepen.io/anon/pen/zPOjmQ

最佳答案

这可以处理您的示例:

function getFirstImgAfterH1(h1) {
var $allH1Img = $("h1, img");
var h1Index = $allH1Img.index(h1);
for (var i = h1Index + 1; i < $allH1Img.length; i++) {
if ($allH1Img[i].tagName === "IMG") {
return $allH1Img[i];
}
}
return null;
}

用法:

getFirstImgAfterH1($("h1").first());

您应该观察到它可以使用 .is() 推广到 selector$element像这样:

function getFirstAfter(selector, $element) {
var selectors = selector + ", " + $element[0].tagName;
var $allSelectorElement = $(selectors);
var elementIndex = $allSelectorElement.index($element);
for (var i = elementIndex + 1; i < $allSelectorElement.length; i++) {
if ($($allSelectorElement[i]).is(selector)) {
return $allSelectorElement[i];
}
}
return null;
}

用法:

getFirstAfter("img", $("h1").first());

关于jquery - 如何使用 jQuery 获取特定元素后找到的第一个元素 "further in the DOM",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46969473/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com