多個元素的jQuery Advanced Selector

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都會返回操作對象，因此您只需在返回的對象上調用下一個方法。

這稱為鏈接

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

---

UPDATE（被束縛，不需要新類）

// 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');

Answer 2

你可以這樣做：

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

當您具有網格#grid的ID時，遍歷所有的wrapper元素，然后使用.find()方法，該方法可以使用多個逗號分隔的選擇器，然后將類添加到找到的元素上。

根據您的評論，您可以更改為：

$("#grid").closest('[class^="col-sm"]')