javascript - 使用 JQuery 根据另一个 DIV 中文本的长度修改 DIV

Question

我有一系列填充有图像、标题和摘录的 div。 许多“内容”div 都有一个带有两行标题的 div，但如果标题是一行(24 个字符或更少)，我希望“摘录”div 添加一个不同的类。

我想我会有一个 jQuery 函数运行在每个“.content”div 中，然后一个 if 语句比较“.contentTitle”中的字符数量，如果为真，那么它会将一个类应用于“.excerpt” ' 在同一个父 .content div 中的 div。

我下面的内容不起作用。我想知道是不是因为我使用的两个 div (.contentTitle/.contentExcerpt .excerpt) 都是容器 div (.content) 的子元素

$(".content").each(function(){
  if($(".contentTitle").text().length < 22) {
    $(".contentExcerpt .excerpt").addClass('TEST');
  }
});

<div class="content">
  <div class="contentImage"></div>
  <div class="contentTitle"><?php the_title(); ?></div>
  <div class="contentExcerpt">
    <div class="excerpt">
      <?php echo(get_the_excerpt()); ?>
    </div>
  </div>
</div>

Answer 1

当您使用容器 div ( .content ) 的子级时，您没有检查 div 的子级，而当有多个 $(".contentTitle").text().length < 22 父级 div 并且其中一个是有了 .content ，条件就会失败。

我修改了下面的代码来检查父 div 的子元素。

$(".content").each(function(){
  var parent = $(this);
  if(parent.find(".contentTitle").text().length < 22) {
    parent.find(".contentExcerpt .excerpt").addClass('TEST');
  }
});

.TEST {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="contentImage"></div>
  <div class="contentTitle">12345678901234567890123</div>
  <div class="contentExcerpt">
    <div class="excerpt">
      Test content
    </div>
  </div>
</div>

<div class="content">
  <div class="contentImage"></div>
  <div class="contentTitle">12345678901234567890</div>
  <div class="contentExcerpt">
    <div class="excerpt">
      Test content
    </div>
  </div>
</div>

注意:如果您替换上面的代码，您会看到，这并没有改变颜色，因为匹配的 div 之一具有 length >= 22 。