javascript - 根据某个 div 的内容向父 div 添加类

Question

我有以下 html，我想在父 div 类中添加类，即 class="boxgrid"，具体取决于teaser_title...

<div class="boxgrid">
     <img src="my_image1.jpg" alt="Image 1"> 
     <div class="cover boxcaption"> 
          <div class="teaser-title">Image 1</div> 
     </div> 
</div>

<div class="boxgrid">
     <img src="my_image2.jpg" alt="Image 2"> 
     <div class="cover boxcaption"> 
          <div class="teaser-title">Image 2</div> 
     </div> 
</div>

现在，我尝试了这段代码......

$('.teaser-text').each(function() { 
      var teasertext = $('.teaser-text').text().replace(/ /g,"_").toLowerCase(); 
      $('.boxgrid').addClass(teasertext); 
});

上面的代码输出如下。

<div class="boxgrid **image_1image_2**">
     <img src="my_image1.jpg" alt="Image 1"> 
     <div class="cover boxcaption"> 
          <div class="teaser-title">Image 1</div> 
     </div> 
</div>

我做错什么了？任何愿意帮助我解决这个小问题的人。谢谢..

Answer 1

采用$(this)

.closest()

$('.teaser-text').each(function() { 
      var teasertext = $(this).text().replace(/ /g,"_").toLowerCase(); 
      $(this).closest('.boxgrid').addClass(teasertext); 
});

Answer 2

您正在使用“.boxgrid”类名向元素添加类。所以每次它都会找到第一个具有“boxgrid”类的div。

代替$('.boxgrid').addClass(teasertext);

用这个，

$(this).closest('.boxgrid').addClass(teasertext); 

这将找到类名为“boxgrid”的最接近的元素。