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

使用siblings( ".selected" )

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

Demo

Answer 2

您可以尝试：

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

＆＃13;

$(".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'});
    }
});

＆＃13;

<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>

＆＃13;

Answer 3

kapantzak的回答是正确的。

但是你可以简单地使用

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

稍微高效一点，因为你不必找到最接近的div。

Answer 4

试用此代码，

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

Answer 5

您也可以使用nextAll并缩短代码，如下所示。

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

演示@ Fiddle

jquery无法使用next / nearest

5 个答案: