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

Question

我想知道如何从元素中获取选择器的上一次出现，而不管它在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>

我也想从<td id="start">元素<td id="start">获取<p class="somethingImportant">Important too!</p> <td id="start">元素。

我试过在JQuery中使用prev()和next() ，但它们仅会立即获得同级。 我也尝试过了closest() ，但这只能得到祖先。 请注意，我想要的元素如何是祖先的孩子。

因此，我尝试了类似$("#start").closest(".somethingImportant").find(".somethingImportant")而JQuery没有返回任何结果，这主要是因为我猜不到closest()了。

我想要类似prevAll(".somethingImportant").last() ，而没有直接的同级限制。

还有其他人遇到过这个问题吗？

编辑

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

在这种情况下，它开始成为问题：

<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"; 它可能不是超级性能，但至少看起来不错。

特别说明：李的附录更好。

Answer 1

这将获得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顺序执行。 进行遍历，找到“开始”元素后，上一个元素就是您想要的元素。

小提琴

请注意，在您的示例中，这将起作用，因为在开始元素之后没有“重要”元素：

$(".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;
}

另一个地方

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-08-14 18:41:05

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-08-14 18:41:05

解决方案1
2 已采纳 2013-08-14 18:41:05