jquery - 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>

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

Answer 2

尝试

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

Answer 3

Using prevUntil() will allow us to get a distant sibling without having to get all. I had a particularly long set that was too CPU intensive using prevAll().

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();

This gets the first preceding sibling if it matches, otherwise it gets the sibling preceding the one that matches, so we just back up one more with prev() to get the desired element.

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

你可以从中得到想法。