jquery ค้นหาพี่น้องที่ใกล้เคียงที่สุดก่อนหน้านี้กับชั้นเรียน

นี่คือ 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 ในหน้า) ฉันต้องการเป้าหมายเดี่ยว

ขอขอบคุณเคล็ดลับใด ๆ :)

ลอง:

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

ทดสอบด้วยมาร์กอัปของคุณ:

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

จะเติมที่ใกล้เคียงที่สุดก่อนหน้าli.par_catด้วย "woohoo"

ลอง

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

การใช้ prevUntil () จะช่วยให้เราได้รับพี่น้องที่อยู่ห่างไกลโดยไม่ต้องรับทั้งหมด ฉันมีชุดยาวโดยเฉพาะที่ใช้ CPU มากเกินไป 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();

สิ่งนี้จะได้รับพี่น้องก่อนหน้านี้ถ้ามันตรงกันมิฉะนั้นจะได้รับพี่น้องก่อนหน้าหนึ่งตรงกันดังนั้นเราเพิ่งสำรองอีกหนึ่งกับ prev () เพื่อรับองค์ประกอบที่ต้องการ

ฉันคิดว่าคำตอบทั้งหมดขาดอะไรบางอย่าง ฉันชอบที่จะใช้สิ่งนี้

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

บันทึกคุณไม่ได้เพิ่ม: อันดับแรกภายในตัวเลือกและอ่านและเข้าใจได้ง่ายขึ้น วิธี prevUntil () มีประสิทธิภาพที่ดีขึ้นเช่นกันแทนที่จะใช้ prevAll ()

คุณสามารถทำตามรหัสนี้:

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

คุณสามารถรับแนวคิดได้จากสิ่งนี้