У меня есть столбец с несколькими экземплярами подобных классов. Классы refHeader1, refHeader2, refHeader3 и ref1select, ref2select, ref3select и refScen1, refScen2, refScen3. Ниже числа заменяются на @{@i}, чтобы динамически управляться. Мне нужно, когда вы нажимаете на (this) ref @{@i} select, отображается ближайший refScen @{@i} диапазон, и все остальные части refScen @{@i} скрыты. До сих пор я пробовал jQuery ниже, не повезло. Что я делаю не так? В консоли я просто получаю пустые [] скобки, пытаясь найти ближайший. Заранее спасибо. http://jsbin.com/ezODiTAV/1/edit
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>
Проблема 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>
тогда
$(".rfselect").click(function () {
$('.rfselect').hide();
$(this).closest('.col-md-12').next().show();
//or $(this).parent().parent().next().show();
});
refScen3
находится внутри refScen2
, это желаемое поведение ...
вы пропустите некоторые '
и "
попробуйте:
$("span[class*='select']").click(function () {
// first hide all refScen spans
$('span[class^="refScen"]').hide();
$(this).closest('.col-md-12').next().show()
});