gpt4 book ai didi

javascript - 使用 JQuery 选择器在 DOM 中先前出现的元素

转载 作者:行者123 更新时间:2023-11-30 17:55:00 25 4
gpt4 key购买 nike

我想知道如何从一个元素中获取之前出现的选择器,而不管它在 DOM 树中的什么位置。我假设之前出现的不是我的原始元素的子元素之一。

例子:

<body>
<p class="somethingImportant">Important</p>
<h1>
<p class="somethingImportant">Important too!</p>
</h1>

<table>
<tr>
<td id="start">Starting from here!</td>
</tr>
</table>
</body>

我想得到 <p class="somethingImportant">Important too!</p>元素,从 <td id="start"> 开始元素。

我试过使用 prev()next()在 JQuery 中,但它们只能得到直接的 sibling 。我尝试了 closest()一个也是,但那只会得到祖先。请注意我想要的元素如何成为祖先的 child 。

所以,我尝试了类似 $("#start").closest(".somethingImportant").find(".somethingImportant") 的东西而 JQuery 没有返回任何结果,主要是因为 closest()我猜不是。

我想要类似 prevAll(".somethingImportant").last() 的东西, 只是没有直接 sibling 的限制。

有没有其他人遇到过这个问题?


编辑

我要解决的问题是如何从起始元素获取上一个“页面”或上一个“标题”。开始元素是一个“光标”,突出显示我所在的节点。我稍后会在我的代码中将 View 滚动到该元素。

这是一个开始成为问题的情况:

<p class="pageNumber">1</p>

<h1>Kinds of Animals</h1>

<p>Here are different kinds of animals:</p>

<table>
<tr><td>Duck</td><td>Giraffe</td></tr>
<tr><td>Anteater</td><td><span id="highlight">Badger</span></td></tr>
</table

我从 `<span id="highlight"> 开始.我想获取与 JQuery 选择器匹配的前一个元素 p.pageNumber, h1, h2, h3, h4, h5, h6无论它嵌套在 DOM 的哪个位置,只要它在高亮之前。选择器匹配所有我认为是标题元素的元素。

在这种情况下,它应该返回 <h1>Kinds of Animals</h1> .


代码示例

使用 Lee 的解决方案,我能够构建一个函数,它可以很好地完成我希望它完成的工作。

function GetPreviousOccurrence(elemSel, sel) {
var selector = elemSel + ", " + sel;
var prev;
$(selector).each(function() {
if ($(this).is(elemSel)) {
return false;
}
prev = this;
});

return prev;
}

就我而言,elemSel = "#highlight";sel = "p.pageNumber, h1, h2, h3, h4, h5 , h6";它可能不是 super 性能,但至少它读起来不错。

额外说明:Lee 的附录更好。

最佳答案

这将获得 DOM 元素的列表,包括您想要在其中查找之前的元素和您提到的元素。我假设你改变了时髦的 <p>元素 <div> id 变成了一个类:

var prev;
$(".start, .somethingImportant").each(function () {
if ($(this).hasClass("start")) {
return false;
}
prev = this;
});

... now '$(prev)' contains the previous elemnent you wanted
... or 'undefined' if there are none.

你得到了所有的元素。 jQuery 按 DOM 顺序执行。遍历,当您找到“开始”元素时,前一个元素就是您想要的元素。

FIDDLE

请注意,对于您的示例,这是可行的,因为在开始元素之后没有“重要”元素:

$(".somethingImportant:last")

附录

我的另一个想法是基于 OP 的解决方案功能。

// Call this way
var $prev = GetPreviousOccurrence($("#highlight"), $("p.pageNumber, h1, h2, h3, h4, h5 , h6"));


function GetPreviousOccurrence($elemSel, $sel) {
var selector = $elemSel.add($sel);
var $prev;
$(selector).each(function() {
if ($(this).is($elemSel)) {
return false;
}
$prev = $(this);
});

return $prev;
}

ANOTHER FIDDLE

关于javascript - 使用 JQuery 选择器在 DOM 中先前出现的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18239528/

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