Question

当html代码中间包含特定类时，我需要隐藏DOM的div。请看一下这个例子。

<body>
 <div class="first-group">
  <h1>Hello world</h1>
 </div>

 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>

</body>

我尝试用jQuery .closest()实现这一点，但没有运气。

$( ".text-block" ).closest( ".first-group" ).css( "color", "red" );

任何解决方案？

Answer 1

if($(".second-group span").hasClass("text-block")) {
  $('.first-group').css('display', "none");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
 <div class="first-group">
  <h1>Hello world</h1>
 </div>

 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>

</body>

Answer 2

如果包装器中.text-block的长度大于0，则只需设置.first-group display: none。

＆＃13;

if($( ".wrapper" ).find( ".text-block" ).length > 0){
  $('.first-group').css( "display", "none" )
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-group">
  <h1>Hello world</h1>
 </div>

 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>

＆＃13;

如果您有多个.first-group和.wrapper，那么您可以简单地循环包装器并找到其父级的父级和前一个元素。

＆＃13;

$( ".wrapper" ).find( ".text-block" ).each(function() {
  $(this).parents('.wrapper').prev('.first-group').css( "display", "none" );
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-group">
  <h1>Hello world</h1>
 </div>

 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>
 
 <div class="first-group">
  <h1>Hello world</h1>
 </div>

 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>

＆＃13;

Answer 3

你的基本问题是closest()寻找祖先。 .text-block不是.first-group的后代。使用prev()查找包含块的先前兄弟。

回复您的评论 ~~prevAll如果有中间兄弟姐妹，则有效。我在示例中添加了一些空divs来演示。我需要检查一些边缘情况。~~

为了让这个更加健壮，我使用prevUntil来限制兄弟选择与prev相结合，以找到感兴趣的实际元素。

$( ".text-block" ).closest( ".wrapper" ).prevUntil(".first-group").prev().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- This Won't Show -->
 <div class="first-group">
  <h1>Hello world</h1>
 </div>
<div></div><div></div>
 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>
 <!--This Will Show-->
  <div class="first-group">
  <h1>Hello world, Again</h1>
 </div>
 <div></div><div></div>
 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="not-text-block">Hello jupiter</span>
      </div>
    </div>
  </div>
 </div>
 <!-- This Won't Show -->
 <div class="first-group">
  <h1>Hello world</h1>
 </div>
<div></div><div></div>
 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>
 <!--This Will Show-->
  <div class="first-group">
  <h1>Hello world, Again</h1>
 </div>
 <div></div><div></div>
 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="not-text-block">Hello jupiter</span>
      </div>
    </div>
  </div>
 </div>


</body>

注意如果您更改HTML结构，这将会中断。

Answer 4

使用nearest将只查找其祖先，而.first-group则在.wrapper div之外。

在下面的代码中，我们找到元素的祖先，然后使用prev（）来获取前一个元素.first-group

 $(this).closest("div.wrapper").prev(".first-group").css('display', 'none');

看看它是否有效。

Answer 5

您可以尝试parents()和siblings()，如下所示：

$(".text-block").parents('.wrapper').siblings('.first-group').css( "color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
 <div class="first-group">
  <h1>Hello world</h1>
 </div>

 <div class="wrapper">
  <div class="second-group">
    <div class="main">
      <div class="small">
        <span class="text-block">Hello mars</span>
      </div>
    </div>
  </div>
 </div>

</body>

包含特定类时隐藏DOM中的元素

5 个答案: