多元素的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高级选择器

回答

相关问题