Question

我有一个如下代码

如果我单击“finallink”类，我想要选择或显示匹配“level_”类的所有先前元素，直到“parent”类。有很多“级别”类，如“level_1，level_2 ... level_n。

<div class="parent">
    <a href="#" class="level_0">level 0 text</a>

    <div class="someclass">1</div>
    <div class="someclass">2</div>
    <div class="someclass">3</div>
    <div class="someclass">4</div>

    <h1 class="level_1">level 1 text</h1>

    <div class="someclass">1</div>
    <div class="someclass">2</div>
    <div class="someclass">3</div>
    <div class="someclass">4</div>

    <h2 class="level_2">level 2 text</h2>

    <a href="#" class="finallink">link</a>
</div>

我试过这样的事情

$(".finallink").closest("h3").prevAll("level_1").css("background-color","yellow");

如何获取所有“level_”值。示例代码jsfiddle

Answer 1

如果标记就像问题一样，finallink是最后一个元素，或者至少没有任何元素在同一个父元素下面有_level类，那么你可以先获取与.parent类匹配的最近父项，然后find()获取与_level类匹配的所有元素：

$(".finallink").closest(".parent")
               .find("[class^='level_']")
               .css("background-color","yellow");

否则，您可以这样做：

$(".finallink").prevAll()
               .filter("[class^='level_']")
               .css("background-color","yellow");

Answer 2

您已经说过“之前的”级别，我指的是链接之前的级别。您已经说过“直到parent类”和那个容器，这意味着我们可以使用所有以前的兄弟姐妹，然后过滤到只有{{1}之一的兄弟姐妹} classes：

level_x

Live Example | Source

即使您最终使用$(".finallink").click(function() { var list = $(this).prevAll().filter(function() { return this.className.match(/\blevel_/); }); // Use `list` });前面的其他课程，例如， level_1。

使用jquery向后遍历

2 个答案: