如何使用 jQuery 找到与 class 最接近的前一个兄弟？

下面是我使用的粗略 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个)。我需要的目标是单一的。

128459 次浏览
小开
最佳答案

试试:

$('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与“呜呼”。

小开

试试看

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

使用 prevUntil ()可以让我们得到一个远方的兄弟姐妹，而不需要得到所有的东西。我有一个特别长的集合，它使用 provAll ()时 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 ()备份另一个兄弟元素以获得所需的元素。

小开

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

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

节省您不添加: 首先在选择器内，并更容易阅读和理解。 方法的性能也比使用 provAll ()的性能好

小开

您可以按照以下代码操作:

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

你可以从中得到启示。


提交答案