Question

这是我生成的html。如何隐藏第二张孔卡？

<div id="cardContainerDealer">
    <div class="card templateDealer">
        <span class="dealerCardFace"></span>
        <span class="dealerCardSuit"></span>
    </div>
<div class="card">
        <span class="dealerCardFace">8</span>
        <span class="dealerCardSuit">♣</span>
    </div>
<div class="card red">
        <span class="dealerCardFace">10</span>
        <span class="dealerCardSuit">♥</span>
    </div>
</div>
</div>

我在下面尝试过，但是没有用

 $("#cardContainerDealer:nth-child(2)").hide();

Answer 1

您使用的nth-child错误。尽管具有命名功能，但它会将兄弟姐妹作为元素的子元素进行匹配，因此您还需要选择类.card：

$("#cardContainerDealer .card:nth-child(2)").hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cardContainerDealer">
  <div class="card templateDealer">
    <span class="dealerCardFace"></span>
    <span class="dealerCardSuit"></span>
  </div>
  <div class="card">
    <span class="dealerCardFace">8</span>
    <span class="dealerCardSuit">♣</span>
  </div>
  <div class="card red">
    <span class="dealerCardFace">10</span>
    <span class="dealerCardSuit">♥</span>
  </div>
</div>

Answer 2

使用Jquery eq引用https://api.jquery.com/eq/

$('.card').eq(1).hide()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="cardContainerDealer">
    <div class="card templateDealer">
        <span class="dealerCardFace"></span>
        <span class="dealerCardSuit"></span>
    </div>
<div class="card">
        <span class="dealerCardFace">8</span>
        <span class="dealerCardSuit">♣</span>
    </div>
<div class="card red">
        <span class="dealerCardFace">10</span>
        <span class="dealerCardSuit">♥</span>
    </div>
</div>

无法用nth-child隐藏我的第三个子元素

2 个答案: