1

我想知道如何从元素中获取上一次出现的选择器，而不管它在 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()and ，但它们只得到直接的兄弟姐妹。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";可能不是超级性能，但至少它读起来不错。

额外说明：李的附录更好。

4

1 回答 1

2

这将获得 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;
}

另一个小提琴

于 2013-08-14T18:41:05.120 回答