如何使用 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 个）。我需要瞄准一个人。

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>

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

Answer 2

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

Answer 3

尝试

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

Answer 4

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

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

这样您就不必在选择器中添加 :first 并且更易于阅读和理解。
prevUntil() 方法也比使用 prevAll() 具有更好的性能

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

你可以从中得到想法。