jQuery 最接近的類選擇器

Question

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

jQuery

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

我想選擇最接近淡入和淡出的 level3，但不起作用。 我的語法錯了嗎？ 在線示例： http : //jsfiddle.net/meEUZ/

Answer 1

嘗試使用.next()而不是.closest()遍歷 DOM 元素的祖先。

工作演示

你也應該使用$(this)而不是$('.Level2')否則它會選擇所有的.Level2而不是點擊的.Level2 。

你也可以這樣做 - $(this).closest('.wrap').find('.Level3').fadeToggle(); .

Answer 2

jQuery 的.closest()方法不選擇兄弟選擇器，而是選擇父選擇器。 看起來您正在尋找.siblings()方法。

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

Answer 3

最近沿 dom 樹向上移動。 它不會找到兄弟姐妹的東西。 您可以使用對父項的查找來實現此目的

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

Answer 4

是的，在 Jquery 中有很多方法可以找到最接近的DOM元素

 $('.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 5

是的！ closest從您傳遞給它的選擇器開始 DOM 搜索，並向上 DOM 層次結構，搜索父/祖先。 改用siblings或next 。 像這樣：

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

Answer 6

從下面的代碼中得到一個清晰的想法：

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