首页 > 解决方案 > jQuery针对父级中的第一个div

问题描述

我正在尝试将 .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>

标签: jquery

解决方案


$( ".date-parent .diarycontainer" )选择.diarycontainer作为元素后代的所有.date-parent元素。.first()然后只取该列表中的第一个。这永远不会超过一个元素。

而不是first()(函数),我相信你想要的是:first(选择器)。

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

推荐阅读