Ближайший селектор jQuery

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

Я хотел выбрать ближайший уровень3 для fadeIn и fadeOut, но не работает. Является ли мой синтаксис неправильным? онлайн Пример: http://jsfiddle.net/meEUZ/

Ответы

Ответ 1

Попробуйте .next() вместо .closest(), который проходит через предки элемента DOM.

Рабочая демонстрация

Также вы должны использовать $(this), а не $('.Level2') иначе он будет выбирать ВСЕ .Level2, а не щелчок.

Вы также можете найти что-то вроде этого - $(this).closest('.wrap').find('.Level3').fadeToggle();.

Ура!

Ответ 2

jQuery .closest() метод не выбирает селекторов, но родителей. Похоже, вы ищете метод .siblings().

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

Ответ 3

ближайший движется вверх по дереву. он не найдет чего-то другого. вы можете использовать поиск для родителя для достижения этого

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

Ответ 4

Да! closest запускает поиск DOM из селектора, который вы передаете ему, и идет вверх по иерархии DOM, ища через родителей/предков. Вместо этого используйте siblings или next. Вот так:

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

Ответ 5

Да, в 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>