jquery не может выбрать элемент, используя следующий/ближайший

Question

У меня есть следующий HTML-код на моей странице;

<div id="c2"> 
    <input type="checkbox" class="expandCollapseSection" id="my_chk"> 
    <span>Header</span> 
    <div style="" class="contentDiv"> 
     <div class="oj-inputtext oj-form-control oj-component">some things</div> 
    </div> 
</div> 

У меня есть следующий JS-код;

$(".expandCollapseSection").click(function (event) { 
    if ($(this).prop("checked")) { 
     $(this).next('.contentDiv').slideDown('slow'); 
    } else { 
     $(this).next('.contentDiv').slideUp('slow'); 
    } 
}); 

Теперь мой вопрос $(this).next('.contentDiv') не выбирает contentDiv

Я даже попытался использовать $(this).closest('.contentDiv')

Но до сих пор не выбирает.

Просто для добавления $(".contentDiv") действительно получает div.

Я делаю что-то неправильно здесь?

Answer 1

Вы можете попробовать: ответ

$(this).closest('div').find('.contentDiv'); 

$(".expandCollapseSection").click(function (event) { 
 
    if ($(this).prop("checked")) { 
 
     $(this).closest('div').find('.contentDiv').css({'color':'red'}); 
 
    } else { 
 
     $(this).closest('div').find('.contentDiv').css({'color':'green'}); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="c2"> 
 
    <input type="checkbox" class="expandCollapseSection" id="my_chk"> 
 
    <span>Header</span> 
 
    <div style="" class="contentDiv"> 
 
     <div class="oj-inputtext oj-form-control oj-component">some things</div> 
 
    </div> 
 
</div> 
 
<div id="c3"> 
 
    <input type="checkbox" class="expandCollapseSection" id="my_chk"> 
 
    <span>Header</span> 
 
    <div style="" class="contentDiv"> 
 
     <div class="oj-inputtext oj-form-control oj-component">some things</div> 
 
    </div> 
 
</div>

Answer 2

kapantzak является правильным.

Однако вы могли бы просто использовать

$(this).parent().find('.contentDiv'); 

Чуть более эффективным, так как вам не нужно, чтобы найти ближайший DIV.

Answer 3

Попробуйте этот код,

$(".expandCollapseSection").click(function (event) { 
    if ($(this).prop("checked")) { 
     $(this).closest('#c2').find('.contentDiv').slideDown('slow'); 
    } else { 
     $(this).closest('#c2').find('.contentDiv').slideUp('slow'); 
    } 
}); 

Answer 4

использование siblings(".selected")

$(".expandCollapseSection").click(function (event) { 
    if ($(this).prop("checked")) { 
     $(this).siblings('.contentDiv').slideDown('slow'); 
    } else { 
     $(this).siblings('.contentDiv').slideUp('slow'); 
    } 
}); 

Demo

Answer 5

Вы также можете использовать nextAll и сократить код тоже, как показано ниже.

$(".expandCollapseSection").change(function (event) { 
    var div = $(this).nextAll('.contentDiv'); 
    var func = this.checked ? 'slideDown' : 'slideUp'; 
    div[func]("slow"); 
}); 

Demo @Fiddle