jQuery查找与类最接近的先前同级

146

这是我可以使用的粗糙html：

<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li> // this is the single element I need to select
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat current_sub"></li> // this is where I need to start searching
<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li>

我需要从遍历.current_sub，找到最接近的前一个.par_cat并对其进行处理。

.find("li.par_cat")返回的全部负载.par_cat（我在页面上大约有30个）。我需要瞄准一个。

非常感谢任何提示:)

— 道勒克斯
source

7

哇，猫真的遍布整个互联网！现在我们也有标准猫和次级猫。

— JD史密斯

257

尝试：

$('li.current_sub').prevAll("li.par_cat:first");

用标记测试了它：

$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");

将li.par_cat使用“ woohoo” 填充最接近的前一个。

— karim79
source

谢谢卡里姆。这也很好用，但是我认为.prev（）会消耗更少的资源，因为.prevAll将获取所有之前匹配的元素，然后将其过滤掉。接受埃德的回答。

— daulex

3

实际上，经过一些发短信后，.prev（）在某些情况下失败了。.prevAll与：首先，每次都工作。谢谢。

— daulex

1

.prev（）仅检查紧接的前一个元素。我将注释与jsFiddle示例一起添加到了下面的答案中。环顾四周后，这是最好的答案，因为它必须循环遍历所有元素，不需要两个函数来捕获所有元素，然后过滤器来查找它。

— 大卫·霍布斯

8

这是否意味着:first正在处理最接近所选对象（相对于页面从上到下）的返回元素列表？

— NReilingh

2

非常感谢您提供的非常有用的答案。您能否回答@NReilingh问题，因为这确实使我感到困惑。是不是:first一个CSS选择器，选择的第一个元素DOM（例如，div.red:first将选择第一个红色DIV DOM）做了jQuery的解析不同的选择？

— 会计师م17年

17

尝试

$('li.current_sub').prev('.par_cat').[do stuff];

— 埃德·詹姆斯
source

19

等一下这不是仅检查前一个元素吗？因此，您的代码将返回null？-在jsFiddle上进行了测试：jsfiddle.net/Y2TEH

— David

4

@DavidHobs我是两年前写的。...这些天我肯定会使用prevAll（）。

— Ed James

8

在这种情况下，@ EdWoodcock考虑更新您的答案。

— Hugo Zink 2015年

14

使用prevUntil（）将使我们能够获得遥远的同胞而不必全部获得。我使用prevAll（）有一个特别长的设置，它占用大量CPU。

var category = $('li.current_sub').prev('li.par_cat');
if (category.length == 0){
  category = $('li.current_sub').prevUntil('li.par_cat').last().prev();
}
category.show();

如果匹配，则获得第一个在前的同级，否则，得到匹配的同级在前的同级，因此我们只需使用prev（）进行备份以获得所需的元素。

— 前pro
source

5

我认为所有答案都缺少某些内容。我喜欢使用这样的东西

$('li.current_sub').prevUntil("li.par_cat").prev();

节省您无需在选择器内添加：first，更易于阅读和理解。与使用prevAll（）相比，prevUntil（）方法也具有更好的性能。

— 汤姆·麦克唐纳
source

0

您可以遵循以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

您可以从中得到想法。

— 马曼
source