jquery - 如果 sibling 有一个特定的类，则隐藏一个 div

Question

我有一个带有 grafico 类的 div，它有两个 child 。其中之一，具有“terminal-alert”类的，如果它是兄弟，则不应出现，grafico-arc 具有特定的“green”类。 我尝试了下面的 jquery，并设法隐藏了“terminal-alert”div，但它没有出现在兄弟没有“green”类的那些上。

$(".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

这可能不是您希望的方式，因为您指定了 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>