jQuery closest class selector

Question

    
Click me
    
Information




        
                      

              相关标签:
       
      

Answer 1

closest travels up the dom tree. it won't find something thats a sibling. you can use a find on a parent to achieve this

$('.Level2').click(function(){
       $(this).parent().find('.Level3').fadeToggle();
    });

Answer 2

Yes, There are many method avaiable in Jquery to find closest of the DOM element

$('.Level1').click(function(){
   $(this).next('.Level3').fadeToggle();
});
$('.Level2').click(function(){
   $(this).closest('.wrap').find('.Level3').fadeToggle();

});
$('.Level4').click(function(){
    $(this).parent().find('.Level3').fadeToggle(); 
});

$('.Level5').click(function(){
    $(this).siblings('.Level3').fadeToggle();
});

.level{background:Red;width:200px;height:40px;}
.Level3{background:blue;width:300px;height:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <div class="Level1 level">Click me()sing next)</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level2 level">Click me(Using closest)</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level4 level">Click me(Usingh Parent)</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level5 level">Click me(Using Sibiling)</div>
    <div class="Level3">Information</div>
</div>

Answer 3

Get a clear idea from the following code:

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

Answer 4

jQuery's .closest() method doesn't select sibling selectors, but parents. Looks like you're looking for the .siblings() method.

$('.Level2').click(function(){
   $(this).siblings('.Level3').fadeToggle();
});

Answer 5

Yes! closest starts the DOM search from the selector you pass to it, and goes upwards the DOM hierarchy, searching through the parents/ancestors. Use siblings or next instead. Like this:

$('.Level2').click(function(){
    $(this).siblings('.Level3').fadeToggle();
});

Answer 6

Try .next() instead of .closest() that traverses through the ancestors of the DOM element.

Working Demo

Also you should use $(this) rather than $('.Level2') else it'll select ALL the .Level2 rather than the clicked one.

You can also go for something like this - $(this).closest('.wrap').find('.Level3').fadeToggle();.