如何使用jQuery查找具有类的最近的前一个兄弟元素？

Question

以下是我要处理的原始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个）。 我需要定位单个元素。

- daulex

Answer 1

尝试：

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

使用您的标记进行测试：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="par_cat"></li>
  <li class="sub_cat"></li>
  <li class="sub_cat"></li>
  <li class="par_cat">// this is the single element I need to select</li>
  <li class="sub_cat"></li>
  <li class="sub_cat"></li>
  <li class="sub_cat current_sub">// this is where I need to start searching</li>
  <li class="par_cat"></li>
  <li class="sub_cat"></li>
  <li class="par_cat"></li>
</ul>

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

- karim79

---

实际上，在发送了一些短信后，.prev() 在几个实例中失败了。使用 :first 的 .prevAll 则每次都有效。谢谢。 - daulex

.prev()只检查前一个元素。我已经在下面的答案中添加了注释，以及jsFiddle的示例。经过搜索，这是最好的答案，尽管它必须遍历所有元素，但不需要两个函数来获取所有元素然后过滤找到它。 - David Hobs

这是否意味着:first作用于一个返回元素列表，该列表从最接近所选对象的元素开始（相对于页面从上到下）而非从顶部开始？ - NReilingh

非常感谢您提供非常有用的答案。 您能否回答@NReilingh的问题，因为它真的让我感到困惑。 :first不是CSS选择器，它选择DOM中的第一个元素（例如，div.red:first会选择* DOM *中的第一个红色DIV），jQuery是否以不同的方式解析了选择器？ - Accountant م

@Accountantم 没有名为 :first 的 CSS 选择器。 - TylerH

Answer 2

使用 prevUntil() 可以获取到一个远离的兄弟元素，而不必获取它前面的所有元素。我曾经有一个特别长的集合，使用 prevAll() 会占用过多的 CPU 资源。

使用 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()再向后退一个即可获取所需的元素。

- eprothro

Answer 3

尝试一下

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

- Ed James

---

等等，这个只检查前一个元素，是吗？因此你的代码会返回null？ - 这里在jsFiddle上测试：http://jsfiddle.net/Y2TEH/ - David Hobs

@DavidHobs，我写下这段话已经两年了......现在我一定会使用prevAll()函数。 - Ed James

@EdWoodcock，请考虑更新您的答案，在那种情况下。 - user3714134

Answer 4

我认为所有的回答都缺少一些东西。我更喜欢使用这样的东西。

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

使用prevUntil()方法可以避免在选择器中添加:first，更易于阅读和理解。此外，与使用prevAll()相比，prevUntil()方法具有更好的性能。

- Tom McDonough

---

我首先尝试了这个，结果是prevUntil返回了许多元素，然后对于这些元素中的每一个都进行了prev()操作。期望的结果是一个元素。 - JasonWilson

Answer 5

你可以跟随这段代码：

<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>';
}
?>

你可以从这里得到一些想法。

- AL MaMun