jquery - jQuery查找具有给定数据ID的所有先前元素

Question

我想找到具有给定数据 id 的所有前面的元素。

例如，如果我有 data-test="3" 我应该得到 data-test="2" 和 data-test="1"：

 <li><a href="#" data-test="1">test</a></li>
 <li><a href="#" data-test="2">test</a></li>
 <li><a href="#" data-test="3">test</a></li>

我注意到 prevAll 功能，但我似乎无法让它工作。

Answer 1

.prevAll()是正确的方法，但是您需要从<li>s 遍历，因为<a>s 不是彼此的兄弟姐妹。

$('a[data-test="3"]').parent().prevAll(':has(a[data-test])').children();

http://jsfiddle.net/mattball/NcatZ

Answer 2

您需要找到该链接，然后访问其父级才能使用prevAll.

$("a[data-test='3']").parent().prevAll().children("a")

得到以前的父母后，你就可以得到他们的children链接。

Answer 3

jQuery 找不到您前面的元素，使用此标记它们位于 DOM 的不同树中。你可以像这样改变你的标记..

<li>
    <a href="#" data-test="1">test</a>
    <a href="#" data-test="2">test</a>
    <a href="#" data-test="3">test</a>
</li>

<script>
    $(document).ready(function() {
        console.log( $("a[data='3']").prevAll() );
    });
</script>

注意排序，倒序排序 result = [data 2, data 1]

如果这可以在像下面这样的树中工作，它应该找到7,6,5还是7,6,1？您会看到此命令对于在 DOM 的其他分支中遍历树不是最佳的。

<li>
    <a href="#" data-test="1">test</a>
    <a href="#" data-yeah="2">test</a>
    <a href="#" data="3">test</a>
    <a href="#" data-yeah="4">test</a>
    <a href="#" data="5">test</a>
</li>
<ol id='list'>
    <li><a href="#" data-test="6">test</a></li>
    <li><a href="#" data-yeah="7">test</a></li>
    <li><a href="#" data="8">test</a></li>
    <li><a href="#" data-yeah="9">test</a></li>
    <li><a href="#" data="10">test</a></li>
 </ol>

最好更改标记，以便 [ data] 在li标签中

<ol id='list'>
    <li data-test="6"><a href="#" >test</a></li>
    <li data-yeah="7"><a href="#">test</a></li>
    <li data="8"><a href="#" >test</a></li>
    <li data-yeah="9"><a href="#">test</a></li>
    <li data="10"><a href="#">test</a></li>
</ol>

所以在这个标记中，以下可以找到你想要的

console.log(
    $("li[data=8]").prevAll()
);

这是li标签造成的典型问题，它们适用于列表项，而不是主要的 DOM 结构。但无论如何，也许其他人知道更好的解决方案..

来自柏林的问候。干杯

Answer 4

$('a[data-test="3"]').parent().prevUntil()

小提琴