如果兄弟姐妹有特定的班级

时间：2017-12-04 17:36:09

标签： jquery html css if-statement hide

我有一个grafico类的div，它有两个孩子。其中一个是＆＃34;终端警报＆＃34;如果是兄弟姐妹，grafico-arc具有特定的＆＃34;绿色＆＃34;类。 我尝试了下面的jquery，并设法隐藏了＆＃34;终端警报＆＃34; div，但它没有出现在兄弟姐妹没有＆＃34;绿色＆＃34;类。

＆＃13;
＆＃13; 
$(".grafico-arc").each(function() {
  if ($(this).hasClass("green")) {
    $(".terminal-alert").siblings().css("display", "none");
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

这可能不是你希望这样做的方式，因为你指定了jQuery，但我还是想把它留在这里。 （jQuery版本进一步下降）

CSS版本：

您可以使用Adjacent Sibling Combinator仅使用CSS 来完成相同的主体。

  

＆＃34;相邻的兄弟组合子（+）分隔两个选择器，只有当它紧跟在第一个元素之后才匹配第二个元素，并且两者都是同一父元素的子元素。＆＃34;

＆＃13;
＆＃13; 
.grafico-arc.green + .terminal-alert {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

jQuery版本

您只需要使用匹配两个类（绿色和grafico-arc）的选择器来运行您的函数。使用此方法，不需要使用hasClass：

的额外条件语句

＆＃13;
＆＃13; 
$(".grafico-arc.green").each(function() {
   $(this).siblings(".terminal-alert").css("display", "none");
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用$(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>

答案 2 :(得分：0)

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

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

＆＃13;
＆＃13; 
.grafico-arc.green+.terminal-alert {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题