jquery는 클래스와 가장 가까운 이전 형제를 찾습니다. is the single element I need

여기 내가 다루는 대략적인 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 ()을 사용하면 모든 것을 얻지 않고도 먼 형제를 얻을 수 있습니다. 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 ()를 사용하여 원하는 요소를 하나 더 백업합니다.

답변

나는 모든 대답에 무언가가 부족하다고 생각합니다. 나는 이런 것을 사용하는 것을 선호한다

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

선택기 내부에 : first를 추가하지 않고 저장하고 읽고 이해하기가 더 쉽습니다. 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>';
}
?>

이것으로부터 아이디어를 얻을 수 있습니다.

답변