多元素的jQuery高級選擇器

我試圖在兩個元素上添加hidden類。多元素的jQuery高級選擇器

$("#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變量。任何具有強大選擇器的人都可以提出解決方案嗎？

來源

2016-07-26 Super Coder

只是鏈接的方法。每次調用方法時，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

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

來源

2016-07-26 11:08:57 kapantzak

謝謝。有什麼方法可以使用addClass（「隱藏」）只有一次？ –

不以這種方式，addClass每次都在differend元素上執行 – kapantzak

感謝您更新的ansers，實際上就像我上面提到的那樣，我不想爲標記添加更多的類。 –

你可以這樣做：

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

當你有柵格#grid的在所有的包裝元素竄動的ID，然後使用.find()方法可以採取多個逗號分隔的選擇然後在找到的元素上添加類。

根據你的評論，你可以改成這樣：

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

來源

2016-07-26 11:10:21 Jai

謝謝。這對性能有任何影響嗎？ –

是的！它具有性能提升，因爲'.find（）'優於'.prev（）'，並且它只使用addclass方法一次。所以，這當然更好。 – Jai

太好了。謝謝Jai –

多元素的jQuery高級選擇器

回答

相關問題