Question

我有一系列的div，其中包含图像，标题和＆amp;摘抄。许多内容＆＃39; div有一个带有两个标题的div，但是我喜欢这个＆＃39; excerpt＆＃39;如果标题是一行（24个字符或更少），则div添加不同的类。

我认为我有一个jQuery函数贯穿每个＆＃39; .content＆＃39; div然后if语句比较＆＃39; .contentTitle＆＃39;中的字符数量，如果为true，则它会将类应用于＆＃39; .excerpt＆＃39; div在同一个父.content div。

中

我下面的内容不起作用。我想知道它是否因为我使用的两个div（.contentTitle / .contentExcerpt .excerpt）是容器div的子项（.content）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

当您使用容器div（.content）的子项时，您没有检查div的子项，而当您有多个$(".contentTitle").text().length < 22时，检查所有其他div匹配.content {1}}父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。

使用JQuery基于另一个DIV中文本的长度修改DIV

1 个答案: