Код jQuery не работает внутри цикла while

Question

Я получил следующий фрагмент, который показывает или скрывает текст в соответствии с длиной текста при нажатии кнопки «Показать больше» или «Показать меньше». Кроме того, кнопка «Показать больше» или «Показать меньше» скрывается, если символы меньше определенного предела, скажем 200. Это хорошо работает, как вы можете видеть из фрагмента. Проблема с кнопкой «Показать больше», которая должна быть скрыта, если символы меньше 200, не работает внутри цикла while. Остальные все работают нормально по мере необходимости. Только этот конкретный раздел для скрытия кнопки не работает.

Полный фрагмент:

var lengthofContent = $(".content").text();
console.log(lengthofContent.length);
if(lengthofContent.length < 200){
  $(".show-more").hide();
}
$(".show-more span").click(function() {
  var $this = $(this);
  var $content = $this.parent().prev(".content");
  var linkText = $this.text().toUpperCase();
  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.toggleClass("hideContent showContent");
  } else {
    linkText = "Show more";
    $content.toggleClass("showContent hideContent");
  }
  $this.text(linkText);
});

.text-container {
  width: 500px;
  margin: 0 auto;
}
.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 55px;
}
.showContent {
  line-height: 1em;
  height: auto;
}
.showContent {
  height: auto;
}
.show-more span {
  cursor: pointer;
  color: #27aae1;
}
.text-container {
  padding: 10px;
  background: #fff;
}
.text-container p {
  line-height: 1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
  <div class="content hideContent">
    <p>
      This is more than 200 characters. Lorem Ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting.
    </p>
  </div>
  <div class="show-more">
    <span>Show more</span>
  </div>
</div>
<div class="text-container">
  <div class="content hideContent">
    <p>
      This is less than 200 characters. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </div>
  <div class="show-more">
    <span>Show more</span>
  </div>
</div>

Код, который не работает внутри цикла while.

var lengthofContent = $(".content").text();
console.log(lengthofContent.length);
if(lengthofContent.length < 200){
  $(".show-more").hide();
}

console.log отображает количество текста 680. Это причина, по которой он не работает. Но не все записи из базы данных превышают 200 символов. Это потому, что он добавляет счетчик всего текста вместе. Но он должен индивидуально рассчитываться для каждой записи отдельно и работать согласно количеству символов каждого поста. Как это сделать?

Элемент цикла while.

<?php while($content = $contents->fetch()){ ?>
    <div class="text-container">
        <div class="content hideContent">
            <p><?php echo $content['uc_desc']; ?></p>
        </div>
        <div class="show-more">
            <span>Show more</span>
        </div>
    </div>
<?php } ?>

Когда вы сокращаете текст до менее чем 200 символов и видите, о чем я говорю. Кнопка Показать больше становится скрытой, и это то, что не работает внутри цикла while. Любая помощь будет оценена.

Answer 1

Проблема в том, что вам нужно перебрать все области содержимого и применить логику.

Удалите это ...

var lengthofContent = $(".content").text(); 
console.log(lengthofContent.length); 
if(lengthofContent.length < 200){ 
$(this).find(".show-more").hide(); 
}

и добавьте этот фрагмент

$('.content').each(function(k,v){
  if ($(v).text().length < 200) {
    $(v).removeClass('hideContent');
    $(v).next().hide();
  }
});

Answer 2

Как насчет подсчета содержимого в php, а затем решить, какой HTML-элемент отображать?

<?php while($content = $contents->fetch()){ 

if (strlen($content) > 200)
{
?>
    <!-- HTML content with show more -->
    <div class="text-container">
        <div class="content hideContent">
            <p><?php echo $content['uc_desc']; ?></p>
        </div>
        <div class="show-more">
            <span>Show more</span>
        </div>
    </div>
<?php 
}
else 
{

?>

<!-- Html Code to display text that contains less than 200 characters -->

<?php 

 }

 ?>