jquery在课堂上找到最近的兄弟姐妹

时间:2010-02-22 10:35:34

标签: jquery html traversal tree-traversal

这是我开始使用的粗略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个)。我需要针对单一目标。

非常感谢任何提示:)

5 个答案:

答案 0 :(得分:243)

尝试:

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

使用您的标记进行测试:

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

将使用“woohoo”填充最近的li.par_cat

答案 1 :(得分:17)

尝试

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

答案 2 :(得分:13)

使用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()来备份另一个兄弟以获得所需的元素。

答案 3 :(得分:5)

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

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

保存您不添加:首先在选择器内部,更容易阅读和理解。 prevUntil()方法也有更好的性能,而不是使用prevAll()

答案 4 :(得分:0)

您可以遵循以下代码:

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

您可以从中获得想法。