使用 Jquery 搜索自身下的第一个元素

search first element under itself using Jquery

本文关键字：第一个 元素 Jquery 搜索 使用      更新时间：2023-09-26

我正在尝试选中多个复选框，当选中前一个复选框时。目前，第一组复选框工作正常。但是当我选择第二个复选框时，应该选中附加的复选框而不是设置的第一个复选框。

网页代码 

<acronym>
    <input name="" type="checkbox" class="OverFlowCheckbox" value="">
    <div class="Selectionlist">
    <div class="percentageBox color2"> </div><span>Hus og hjem</span></div>
    <div class="_user_auth">
    <ul class="selectCheckBox">
    <li><input type="checkbox" id="checkbox1" class="css-checkbox" checked="checked"/><label for="checkbox1" class="css-label lite-red-check">Boligalarm</label></li>
    <li><input type="checkbox" id="checkbox2" class="css-checkbox" checked="checked"/><label for="checkbox2" class="css-label lite-red-check">Forsikring</label></li>
    <li><input type="checkbox" id="checkbox3" class="css-checkbox" checked="checked"/><label for="checkbox3" class="css-label lite-red-check">Lån</label></li>
    <li><input type="checkbox" id="checkbox5" class="css-checkbox" checked="checked"/><label for="checkbox5" class="css-label lite-red-check">Eiend. megler</label></li>
    <li><input type="checkbox" id="checkbox6" class="css-checkbox" checked="checked"/><label for="checkbox6" class="css-label lite-red-check">Telecom</label></li>
    <li><input type="checkbox" id="checkbox4" class="css-checkbox" checked="checked"/><label for="checkbox4" class="css-label lite-red-check">Varmepumpe</label></li>
    <li><input type="checkbox" id="checkbox5" class="css-checkbox" checked="checked"/><label for="checkbox5" class="css-label lite-red-check">Annet</label></li>
    </ul>
    </div>
    </acronym> 
    <acronym>
    <input name="" type="checkbox" class="OverFlowCheckbox" value="">
     <div class="Selectionlist">
    <div class="percentageBox color3"></div><span>Bil og båt</span></div>
    <div class="_user_auth">
    <ul class="selectCheckBox">
    <li><input type="checkbox" id="checkbox1" class="css-checkbox" checked="checked"/><label for="checkbox1" class="css-label lite-red-check">Bilverksted</label></li>
    <li><input type="checkbox" id="checkbox2" class="css-checkbox" checked="checked"/><label for="checkbox2" class="css-label lite-red-check">Båtverksted</label></li>
    <li><input type="checkbox" id="checkbox3" class="css-checkbox" checked="checked"/><label for="checkbox3" class="css-label lite-red-check">Dekk</label></li>
    <li><input type="checkbox" id="checkbox5" class="css-checkbox" checked="checked"/><label for="checkbox5" class="css-label lite-red-check">Annet bil</label></li>
    <li><input type="checkbox" id="checkbox6" class="css-checkbox" checked="checked"/><label for="checkbox6" class="css-label lite-red-check">Annet båt</label></li>
    </ul>
    </div>
    </acronym>

JavaScript 代码

$(document).ready(function(){
    $('acronym .OverFlowCheckbox').click(function(){
        if ($(this).is(':checked')) { 

     $('._user_auth').first().fadeIn('slow');
    } 
        else 
    {
    $('._user_auth ').fadeOut('slow');
     }
    });
});

当前在线 JSFIDDLE 代码

您可以使用 $（this）.parent（）.find（'._user_auth'） 查找当前元素下的列表。

代码的 JSFiddle 演示

$(document).ready(function () {
    $('acronym .OverFlowCheckbox').click(function () {
        var chkList = $(this).parent().find('._user_auth').first();
        if ($(this).is(':checked')) {
            chkList.fadeIn('slow');
        } else {
            chkList.fadeOut('slow');
        }
    });
});

$(document).ready(function(){
    $('acronym .OverFlowCheckbox').click(function(){
        if ($(this).is(':checked')) { 
            $(this).next().next().fadeIn('slow');
        } else {
            $(this).next().next().fadeOut('slow');
        }
   });
});

您可以遍历到最近的元素acronym，然后在其中找到div._user_auth：

$('acronym .OverFlowCheckbox').click(function(){
if ($(this).is(':checked')) { 
    $(this).closest('acronym').find('._user_auth').fadeIn('slow');
} else {
    $(this).closest('acronym').find('._user_auth').fadeOut('slow');
}});

工作演示

相关文章：