如果兄弟姐妹有特定的 class，则隐藏 div

Question

我有一个 div 和 grafico class，它有两个 children。其中之一，带有 "terminal-alert" class 的，如果它是兄弟，则不应出现，grafico-arc 具有特定的 "green" class。我尝试了下面的 jquery，并设法隐藏了 "terminal-alert" div，但它不会出现在兄弟没有 "green" [=29] 的那些上=].

$(".grafico-arc").each(function() {
  if ($(this).hasClass("green")) {
    $(".terminal-alert").siblings().css("display", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc green">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>1 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc yellow">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>2 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc red">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>3 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

Answer 1

使用$(this)代替$(".terminal-alert")

$(".grafico-arc").each(function() {
  if ($(this).hasClass("green")) {
    $(this).siblings().css("display", "none");
    //---------------------^ // also you can use hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc green">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>1 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc yellow">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>2 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc red">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>3 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

Answer 2

看起来好像只需要一些 CSS 就可以做到这一点，不需要 JavaScript 或 jQuery:

.grafico-arc.green+.terminal-alert {
  display: none;
}

.grafico-arc.green+.terminal-alert {
  display: none;
}

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc green">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>1 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc yellow">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>2 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc red">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>3 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

Answer 3

这可能不是您希望的方式，因为您指定了 jQuery，但我还是想把它留在这里。（jQuery 版本再往下）

CSS 版本:

您可以仅使用 CSS 和 Adjacent Sibling Combinator.

完成相同的原则

"The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element."

.grafico-arc.green + .terminal-alert { display: none; }

<div class="sliderCard"> <div class="grafico"> <div class="grafico-arc green"> <div class="topo"></div> <div class="consumoTerminal"> <h3>1 <span>GB</span></h3> <p>(21) 98899-0805</p> <button class="detail"></button> </div> </div> <div class="terminal-alert"> <p>Saldo esgotando <a href="#">Mais internet</a></p> </div> </div> </div> <div class="sliderCard"> <div class="grafico"> <div class="grafico-arc yellow"> <div class="topo"></div> <div class="consumoTerminal"> <h3>2 <span>GB</span></h3> <p>(21) 98899-0805</p> <button class="detail"></button> </div> </div> <div class="terminal-alert"> <p>Saldo esgotando <a href="#">Mais internet</a></p> </div> </div> </div> <div class="sliderCard"> <div class="grafico"> <div class="grafico-arc red"> <div class="topo"></div> <div class="consumoTerminal"> <h3>3 <span>GB</span></h3> <p>(21) 98899-0805</p> <button class="detail"></button> </div> </div> <div class="terminal-alert"> <p>Saldo esgotando <a href="#">Mais internet</a></p> </div> </div> </div>

jQuery版本

您只需要运行您的函数使用匹配类（绿色和 grafico-arc）的选择器。使用此方法不需要使用 hasClass:
的额外条件语句

$(".grafico-arc.green").each(function() { $(this).siblings(".terminal-alert").css("display", "none"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sliderCard"> <div class="grafico"> <div class="grafico-arc green"> <div class="topo"></div> <div class="consumoTerminal"> <h3>1 <span>GB</span></h3> <p>(21) 98899-0805</p> <button class="detail"></button> </div> </div> <div class="terminal-alert"> <p>Saldo esgotando <a href="#">Mais internet</a></p> </div> </div> </div> <div class="sliderCard"> <div class="grafico"> <div class="grafico-arc yellow"> <div class="topo"></div> <div class="consumoTerminal"> <h3>2 <span>GB</span></h3> <p>(21) 98899-0805</p> <button class="detail"></button> </div> </div> <div class="terminal-alert"> <p>Saldo esgotando <a href="#">Mais internet</a></p> </div> </div> </div> <div class="sliderCard"> <div class="grafico"> <div class="grafico-arc red"> <div class="topo"></div> <div class="consumoTerminal"> <h3>3 <span>GB</span></h3> <p>(21) 98899-0805</p> <button class="detail"></button> </div> </div> <div class="terminal-alert"> <p>Saldo esgotando <a href="#">Mais internet</a></p> </div> </div> </div>

如果兄弟姐妹有特定的 class，则隐藏 div

Hide a div if sibling has an specific class

html

css

jquery

if-statement

hide