Javascript 使用jQuery动态查找和显示特定节?
我有一个列,其中有多个类似类的实例。类为refHeader1、refHeader2、refHeader3和ref1select、ref2select、ref3select和refscene1、refscene2、refscene3。下面,数字被动态驱动的@{@i}替换。我需要的是,当单击(此)ref@{@I}select时,将显示最近的refScen@{@I}span,并隐藏所有剩余的refScen@{@I}span。到目前为止,我已经尝试了下面的jQuery,但没有成功。我做错了什么?在控制台中,当试图查找最近的时,我只是得到了空的[]括号。提前谢谢 jQueryJavascript 使用jQuery动态查找和显示特定节?,javascript,jquery,find,next,closest,Javascript,Jquery,Find,Next,Closest,我有一个列,其中有多个类似类的实例。类为refHeader1、refHeader2、refHeader3和ref1select、ref2select、ref3select和refscene1、refscene2、refscene3。下面,数字被动态驱动的@{@i}替换。我需要的是,当单击(此)ref@{@I}select时,将显示最近的refScen@{@I}span,并隐藏所有剩余的refScen@{@I}span。到目前为止,我已经尝试了下面的jQuery,但没有成功。我做错了什么?在控制台
$("span[class*=select]").click(function () {
// first hide all refScen spans
$('span[class^=refScen]').hide();
// show this refScen span
//$(this).closest('span[class^=refScen]').show();
//$(this).find().closest('span[class^=refScen]').show();
//$(this).find().next('span[class^=refScen]').show();
});
HTML
<div class="col-md-12 padT nPadL nPadR" style="padding-bottom:10px">
<span class='refHeader@{@i}'>
<a href="#"><label>@item.Name</label></a>
<div class="glyphicon glyphicon-chevron-down text-right ref@{@i}select"></div>
</span>
</div>
<!-- /left options -->
<span class='refScen@{@i}'>
<div class="col-md-9 col-md-offset-3 padB nPadL nPadR">
<a href="#">@listitem.Name</a>
</div>
</span>
您错过了一些
”
和“
尝试以下方法:
$("span[class*='select']").click(function () {
// first hide all refScen spans
$('span[class^="refScen"]').hide();
$(this).closest('.col-md-12').next().show()
});
问题是
refScen**
不是ref@{@i}select
元素的祖先,它是其祖先元素之一的下一个同级元素
$("div[class*=select]").click(function () {
$('span[class^="refScen"]').hide();
$(this).closest('.col-md-12').next().show();
//or $(this).parent().parent().next().show();
});
演示:
为了简单起见,为什么不能在没有如下数字的情况下为这些元素中的每一个添加一个类
<div class="col-md-12 padT nPadL nPadR" style="padding-bottom:10px">
<span class='refHeader@{@i} refHeaderrefHeader'>
<a href="#"><label>@item.Name</label></a>
<div class="glyphicon glyphicon-chevron-down text-right ref@{@i}select rfselect"></div>
</span>
</div>
<!-- /left options -->
<span class='refScen@{@i} refScen'>
<div class="col-md-9 col-md-offset-3 padB nPadL nPadR">
<a href="#">@listitem.Name</a>
</div>
</span>
我没有看到任何包含术语“select”的类的span,我看到上面用jsbin示例更新了一个divtry问题。仍然无法使其正常工作。@triplethreat77它也不是
$(“span[class*=select]”)。
它是$(“div[class*=select]”。
$(".rfselect").click(function () {
$('.rfselect').hide();
$(this).closest('.col-md-12').next().show();
//or $(this).parent().parent().next().show();
});