我正在尝试在两个元素上添加 hidden
类。
$("#grid").closest(".ui-jqgrid").addClass("hidden");
$("#grid").closest(".ui-jqgrid").prev("h3").addClass("hidden");
对于以下标记,
<div class="col-sm-12">
<h3>Heading 1</h3>
<div class="ui-jqgrid hidden" id="" dir="rtl" style="width: 1035px;">
<div class="jqgrid-overlay ui-overlay" id=""></div>
<div class="loading row" id="" style="display: none;"></div>
<div class="ui-jqgrid-view" role="grid" id="">
<div class="ui-jqgrid-titlebar ui-jqgrid-caption-rtl" style="display: none;">
<a role="link" class="ui-jqgrid-titlebar-close HeaderButton " title="" style="left: 0px;">
<span class="ui-jqgrid-headlink glyphicon glyphicon-circle-arrow-up"></span></a>
<span class="ui-jqgrid-title"></span>
</div>
<div class="ui-jqgrid-bdiv">
<div style="position: relative;">
<div></div>
<table id="grid" class="ui-jqgrid-btable">
</table>
</div>
</div>
</div>
</div>
</div>
我可以在一行中完成此操作,而不需要两次查找 closest(".ui-jqgrid")
吗?我不想向标记添加更多类,也不想在这里使用 JS 变量。任何拥有强大选择器的人都可以提出解决方案吗?
最佳答案
只需链接方法即可。每次调用方法时,jQuery 都会返回被操作的对象,因此您只需在返回的对象上调用下一个方法即可。
这被称为 chaining
$("#grid").closest(".ui-jqgrid").addClass("hidden").prev("h3").addClass("hidden");
<小时/>
说明
$("#grid") // returns #grid
.closest(".ui-jqgrid") // returns .ui-jqgrid
.addClass("hidden") // returns .ui-jqgrid
.prev("h3") // returns the previous h3 element of .ui-jqgrid
.addClass("hidden"); // returns the h3
<小时/>
更新(链接且不需要新类)
// Select the closest '.ui-jqgrid', find its parent and hide it's direct children ('h3' and '.ui-jqgrid' div)
$('#grid').closest('.ui-jqgrid').parent().children().addClass('hidden');
关于javascript - jQuery 多个元素的高级选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38588220/