Question

我正在尝试在两个元素上添加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变量。任何拥有强大选择者的人都能提出解决方案吗？

Answer 1

只是链接方法。每次调用方法时，jQuery 返回操作对象，因此您只需在返回的对象上调用下一个方法。

这称为chaining

try/catch

<强>解释

$("#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

Answer 2

你可以这样做：

$("#grid").closest('.col-sm-12').find(".ui-jqgrid, h3").addClass("hidden");

当你拥有网格#grid的id时，遍历所有的包装元素然后使用{strong> 方法 ，它可以使用多个逗号分隔的选择器 然后在找到的元素上添加类。

根据您的评论，您可以更改为：

.find()

用于多个元素的jQuery高级选择器

2 个答案: