29 
<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();
});

我想选择最接近fadeIn 和fadeOut 的level3，但不起作用。我的语法错了吗？在线示例：http: //jsfiddle.net/meEUZ/

4

6 回答 6

38

尝试.next()而不是.closest()遍历 DOM 元素的祖先。

工作演示

另外，您应该使用$(this)而不是$('.Level2')其他方式，它会选择所有.Level2而不是单击的。

你也可以选择这样的东西 - $(this).closest('.wrap').find('.Level3').fadeToggle();。

于 2013-04-17T03:58:38.640 回答
18

jQuery 的.closest()方法不选择兄弟选择器，而是选择父选择器。看起来您正在寻找.siblings()方法。

$('.Level2').click(function(){
   $(this).siblings('.Level3').fadeToggle();
});
于 2013-04-17T03:58:17.360 回答
7

最接近的沿着 dom 树上行。它不会找到兄弟姐妹的东西。您可以使用 find on a parent 来实现此目的

$('.Level2').click(function(){
       $(this).parent().find('.Level3').fadeToggle();
    });
于 2013-04-17T03:58:14.063 回答
3

是的，在 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>

于 2018-02-10T06:29:49.700 回答
0

是的！closest从您传递给它的选择器开始 DOM 搜索，然后向上 DOM 层次结构，搜索父母/祖先。使用siblings或next代替。像这样：

$('.Level2').click(function(){
    $(this).siblings('.Level3').fadeToggle();
});
于 2013-04-17T04:02:13.550 回答
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>';
}
?>
于 2018-09-19T04:46:33.667 回答