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

【问题标题】：Modify a DIV based on length of a text in another DIV using JQuery使用 JQuery 根据另一个 DIV 中的文本长度修改 DIV
【发布时间】：2016-11-21 22:45:57
【问题描述】：

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

我想我会有一个贯穿每个“.content”div的jQuery函数，然后一个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>

【问题讨论】：

标题是用户输入的还是正在加载的文档的一部分？
标题是从数据库中动态填充的。这不是输入字段。
为什么不在服务器上做呢？
@HeyCameron 请在下面查看我的答案。

标签： javascript jquery html css if-statement

【解决方案1】：

当您使用容器 div (.content) 的子级时，您没有检查 div 的子级，而当有多个 .content 父级 div 时，您会检查与 $(".contentTitle").text().length < 22 匹配的所有其他 div当其中一个拥有length >= 22 时，条件将失败。

我已经修改了下面的代码来检查父 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。

【讨论】：

@HeyCameron 很棒 :-)