jQuery找到最近的同级同级答案

【问题标题】：jQuery find closest previous sibling with classjQuery找到最近的同级同级
【发布时间】：2011-01-19 14:19:45
【问题描述】：

这是我使用的粗略 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 个）。我需要瞄准单一的。

【问题讨论】：

标签： jquery html traversal tree-traversal

【解决方案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>

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

【讨论】：

实际上，在发了一些短信之后，.prev() 在少数情况下失败了。 .prevAll 与 :first，每次都有效。谢谢。
.prev() 只检查前一个元素。我在下面的答案中添加了评论以及 jsFiddle 示例。环顾四周，这是最好的答案，因为虽然它必须循环遍历所有元素，但它不需要两个函数来抓取所有元素然后过滤找到它。
这是否意味着:first 正在处理从最接近所选对象开始的返回元素列表（而不是相对于页面从上到下）？
非常感谢您提供的非常有用的答案。你能回答@NReilingh 的问题吗，因为这真的让我很困惑。 :first 不是选择 DOM 中第一个元素的 CSS 选择器（例如 div.red:first 将选择 DOM 中的第一个红色 DIV）吗 jQuery 解析了选择器不一样？
@Accountantم 没有名为 :first 的 CSS 选择器。

【解决方案2】：

试试

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

【讨论】：

等等，什么？这不只检查前面的元素吗？因此，您的代码将返回 null？ - 这里在 jsFiddle 上测试：jsfiddle.net/Y2TEH
@DavidHobs 这是我两年前写的……这些天我肯定会使用 prevAll()。
@EdWoodcock 在这种情况下考虑更新您的答案。

【解决方案3】：

使用 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() 再备份一个以获取所需的元素。

【讨论】：

【解决方案4】：

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

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

无需在选择器中添加 :first 即可节省您的时间，并且更易于阅读和理解。 prevUntil() 方法也有更好的性能，而不是使用 prevAll()

【讨论】：

我首先尝试了这个，发生的事情是 prevUntil 返回许多元素，然后它为许多元素中的每一个获取 prev() 。想要的结果是一个元素

【解决方案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>';
}
?>

你可以从中得到灵感。

【讨论】：