jQuery select 或在 div 中隐藏深层嵌套的 div 和 class

Question

我想在只有 class 名称的容器 div 中隐藏深度嵌套的 div（具有 class 或 ID 名称）。容器 div 是由应用程序生成的，因此我无法在其上设置 ID。我不知道 div 生成了多少个级别，所以我不能使用路径 - 因为该路径有时会根据生成的页面而变化。差点就需要用循环什么的了

这是我的

<div class ="container">
   <div class ="level1">
     <div class = "level2">
        <other nested  divs and html here...>
                 <div class = "levelN" id="idLevelN">
                      content to hide 
                         <more divs and html here..../>

                 </div>
        </other nested  divs and html here...>
     </div>
   </div>
</div>

我想用 class = "levelN" id="idLevelN".

隐藏 div

我尝试了各种方法但我放弃了。我尝试使用 find()、filter() 等...帮助？谢谢

Answer 1

I'm looking to hide a deeply nested div (with a class or ID name) within a container div with only class name.I don't know exactly how many levels the div is generated

假设你有这个：

<div id="SearchHere">
  <div>
    <div>
      <div></div>
    </div>
  </div>
  <div></div>
  <div>
    <div>
      <div>
        <div >aaaaa</div> /* you want this*/
      </div>
    </div>
  </div>
  <div>
    <div></div>
  </div>
</div>

然后你可以做 this :

jQuery.fn.deepestDiv = function()
 {
     var $target = this.children(),
         $next = $target;
     while ($next.length)
     {
         $target = $next;
         $next = $next.children();
     }
     return $target;
 }

现在：

  $("#SearchHere").deepestDiv().css('color','red')

http://jsbin.com/kedobuyumo/3/edit

Answer 2

您应该可以只通过 ID 访问它，因为 ID 对于一个页面是唯一的。

$('#idLevelN').hide()

但是，我意识到在实践中情况并非总是如此，因此您可能需要改用 class。

$('div.container div.levelN').hide()

Answer 3

您可以使用 .children() 选择器过滤所选元素的 children 所有元素。

您也可以使用.parents()来检查div与containerclass是否有效（是parent）。

喜欢：

   if ($( '#idLevelN' ).parents('.container').length){
     $( '#idLevelN').children().hide();
}

这是一个Fiddle

jQuery select 或在 div 中隐藏深层嵌套的 div 和 class

jQuery select or hide deeply nested div within a div with a class

jquery

nested

selector