Javascript 使用Jquery搜索自身下的第一个元素
当选中上一个复选框时,我尝试选择多个复选框。 目前,第一组复选框工作正常。但是当我选择第二个复选框时,应该选择附加的复选框,而不是第一个复选框集 html代码Javascript 使用Jquery搜索自身下的第一个元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当选中上一个复选框时,我尝试选择多个复选框。 目前,第一组复选框工作正常。但是当我选择第二个复选框时,应该选择附加的复选框,而不是第一个复选框集 html代码 <acronym> <input name="" type="checkbox" class="OverFlowCheckbox" value=""> <div class="Selectionlist"> <div class="percentageBox color2"
<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>
$(document).ready(function(){
$('acronym .OverFlowCheckbox').click(function(){
if ($(this).is(':checked')) {
$('._user_auth').first().fadeIn('slow');
}
else
{
$('._user_auth ').fadeOut('slow');
}
});
});
您可以遍历到最近的元素
首字母缩写词
,然后在其中找到div.\u user\u 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');
}});
您可以使用$(this).parent().find('.\u user\u auth')查找当前元素下的列表
您可以使用jquery
.next()
以下一个元素为目标。或者使用.child()
或.children()
获取一个或多个子对象。API中有一整节用于遍历方法。从这里开始,看看每个代码的示例。您的代码完全按照预期工作。@pankaj tiwari使用$(this.parent().find()在下面签出我的答案。如果你的工作没有完成,请告诉我。谢谢你对我的帮助。你能为问题添加更多描述吗?
$(document).ready(function(){
$('acronym .OverFlowCheckbox').click(function(){
if ($(this).is(':checked')) {
$(this).next().next().fadeIn('slow');
} else {
$(this).next().next().fadeOut('slow');
}
});
});
$(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');
}
});
});