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>

我希望从<p class="somethingImportant">Important too!</p>元素开始获取<td id="start">元素。

我尝试在JQuery中使用prev()和next()，但他们只是立即获得兄弟姐妹。我也尝试了closest()，但这只能得到祖先。注意我想要的元素是祖先的孩子。

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

我想要像prevAll(".somethingImportant").last()这样的东西，只是没有直接的兄弟限制。

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

修改

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

这是一种情况，它开始成为一个问题：

<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顺序执行。迭代，当你找到'start'元素时，前一个元素就是你想要的元素。

FIDDLE

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

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

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

1 个答案: