Question

我试图将.show-name类仅添加到.date-parent的每个父块中的.field-diary-name的第一个实例，如下例所示：

在我的jQuery中，我已经尝试过

$(document).ready(function(){
$( ".date-parent .diarycontainer" ).first().find( ".film-diary-name" 
).addClass( "showname" );
});

这只会将该类添加到父.date-parent的第一个实例中的第一个实例中，而不会浏览第二个块。

    <div class="date-parent">
   <h3 class="cinema-h3">Tue 19 Feb 2019</h3>
   <div class="diarycontainer">
      <div class="film-diary-name show-name">Movie 1 (15)<span class="cert-15"> 
         </span> 
      </div>
      <span class="film-diary-times"><a href="#">7.40pm</a></span>
   </div>
   <div class="diarycontainer">
      <div class="film-diary-name">Movie 1  (15)<span class="cert-15"></span></div>
      <span class="film-diary-times"><a href="#">8.40pm</a></span>
   </div>
</div>
<div class="date-parent">
   <h3 class="cinema-h3">Tue 19 Feb 2019</h3>
   <div class="diarycontainer">
      <div class="film-diary-name show-name">Movie 2 (15)<span class="cert-15"> 
         </span> 
      </div>
      <span class="film-diary-times"><a href="#">8.40pm</a></span>
   </div>
   <div class="diarycontainer">
      <div class="film-diary-name">Movie 2 (15)<span class="cert-15"></span> </div>
      <span class="film-diary-times"><a href="#">8.40pm</a></span>
   </div>
</div>

Answer 1

$( ".date-parent .diarycontainer" )选择所有.diarycontainer元素，它们是.date-parent元素的后代。 .first()然后从该列表中仅获取第一个。这永远不会超过一个元素。

我相信您想要的是:first（选择器），而不是first()（功能）。

$(".date-parent .diarycontainer:first .film-diary-name").addClass("showname");

Answer 2

尝试一下

    $(".diarycontainer").parents('.date-parent').first().find( ".film-diary-name" 
).addClass( "showname" );

Answer 3

您可以使用:nth-of-type选择器为每个父母仅获取第一个diarycontainer。

$(function() {
  $(".date-parent .diarycontainer:nth-of-type(1)").find(".film-diary-name").addClass("showname");
});

.showname { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date-parent">
  <h3 class="cinema-h3">Tue 19 Feb 2019</h3>
  <div class="diarycontainer">
    <div class="film-diary-name show-name">Movie 1 (15)<span class="cert-15"> 
         </span>
    </div>
    <span class="film-diary-times"><a href="#">7.40pm</a></span>
  </div>
  <div class="diarycontainer">
    <div class="film-diary-name">Movie 1 (15)<span class="cert-15"></span></div>
    <span class="film-diary-times"><a href="#">8.40pm</a></span>
  </div>
</div>
<div class="date-parent">
  <h3 class="cinema-h3">Tue 19 Feb 2019</h3>
  <div class="diarycontainer">
    <div class="film-diary-name show-name">Movie 2 (15)<span class="cert-15"> 
         </span>
    </div>
    <span class="film-diary-times"><a href="#">8.40pm</a></span>
  </div>
  <div class="diarycontainer">
    <div class="film-diary-name">Movie 2 (15)<span class="cert-15"></span> </div>
    <span class="film-diary-times"><a href="#">8.40pm</a></span>
  </div>
</div>

定位父类中第一个div的jQuery

3 个答案: