Читать больше/читать меньше скрипт, работающий с разными типами текста

У меня есть электронная коммерция с несколькими типами описаний, это могут быть абзацы, неупорядоченные списки или упорядоченные списки. Я использую скрипт для функции «увидеть больше/увидеть меньше», которую мне удалось заставить работать правильно в зависимости от количества абзацев и их длины. Но бывают ситуации, когда текст представляет собой просто список, и для этих случаев я не могу найти способ заставить скрипт работать корректно. В html примере последний содержит только список без абзацев после него, скрипт не работает. В чем ошибка?

jQuery.noConflict();
jQuery(document).ready(function($) {
$('.description').each(function(){
var p = $(this).find('p, ul, ol');
var LiN = p.length;
if ( LiN > 3){
$(p).eq(2).nextAll().hide().addClass('toggleable');
$(this).find('p, ul, ol').eq(4).nextAll().hide().addClass('toggleable');
$(this).append('<p class = "more">Read more...</p>');
}
});

$('.description').on('click','.more', function(){
if ( $(this).hasClass('less') ){
$(this).text('Read more...').removeClass('less');
}else{
$(this).text('Read less...').addClass('less');
}
$(this).siblings('p.toggleable, ul.toggleable, ol.toggeable').slideToggle();
});
});

.more{color:red; cursor:pointer;}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "description">
  <p>Párrafo 01</p>
    <p>Párrafo 02</p>
    <p>Párrafo 02</p>
    <p>Párrafo 04</p>
    <p>Párrafo 05</p>
    <p>Párrafo 06</p>
</div>

<div class = "description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ul>
<li>Lista 01</li>
<li>Lista 02</li>
<li>Lista 03</li>
<li>Lista 04</li>
<li>Lista 05</li>
<li>Lista 06</li>
 </ul>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>
</div>


<div class = "description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ol>
<li>Lista 01</li>
<li>Lista 02</li>
<li>Lista 03</li>
<li>Lista 04</li>
<li>Lista 05</li>
<li>Lista 06</li>
 </ol>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>
<p>Lorem Ipsum is simply dummy text </p>

</div>


<div class = "description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ul>
<li>Lista 01</li>
<li>Lista 02</li>
<li>Lista 03</li>
<li>Lista 04</li>
<li>Lista 05</li>
<li>Lista 06</li>
<li>Lista 07</li>
<li>Lista 08</li>
<li>Lista 09</li>
<li>Lista 10</li>
 </ul>

</div>

Последний div не имеет класса описания

— 28.04.2023 16:20

Извините, исправлено, спасибо

— 28.04.2023 16:24

javascript html jquery html-lists

28.04.2023 16:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете дать общий класс всем вашим элементам, а затем использовать этот класс и :gt(), чтобы скрыть или показать нужные элементы.

Демонстрационный код:

jQuery.noConflict();
jQuery(document).ready(function($) {
  $(".description").find('p, ul > li, ol > li').addClass("elements"); //add this class to all elements///
  $('.description').each(function() {
    var p = $(this).find('.elements');
    var LiN = p.length;
    if (LiN > 3) {
      $(this).find('.elements:gt(2)').hide().addClass('toggleable'); //hide all elements which is > 2
      $(this).append('<p class = "more">Read more...</p>');
    }
  });

  $('.description').on('click', '.more', function() {
    if ($(this).hasClass('less')) {
      $(this).text('Read more...').removeClass('less');
    } else {
      $(this).text('Read less...').addClass('less');
    }
    $(this).closest(".description").find(".elements.toggleable").slideToggle(); //use class to hide
  });

});

.more {
  color: red;
  cursor: pointer;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "description">
  <p>Párrafo 01</p>
  <p>Párrafo 02</p>
  <p>Párrafo 02</p>
  <p>Párrafo 04</p>
  <p>Párrafo 05</p>
  <p>Párrafo 06</p>
</div>

<div class = "description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ul>
    <li>Lista 01</li>
    <li>Lista 02</li>
    <li>Lista 03</li>
    <li>Lista 04</li>
    <li>Lista 05</li>
    <li>Lista 06</li>
  </ul>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
</div>


<div class = "description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ol>
    <li>Lista 01</li>
    <li>Lista 02</li>
    <li>Lista 03</li>
    <li>Lista 04</li>
    <li>Lista 05</li>
    <li>Lista 06</li>
  </ol>
  <p>Lorem Ipsum is simply dummy text </p>

  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>

  <ol>
    <li>Lista 07</li>
    <li>Lista 08</li>
    <li>Lista 09</li>
    <li>Lista 010</li>
  </ol>
</div>


<div class = "description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ul>
    <li>Lista 01</li>
    <li>Lista 02</li>
    <li>Lista 03</li>
    <li>Lista 04</li>
    <li>Lista 05</li>
    <li>Lista 06</li>
    <li>Lista 07</li>
    <li>Lista 08</li>
    <li>Lista 09</li>
    <li>Lista 10</li>
  </ul>

</div>

Удивительный. Мне нужно изучить это подробно 😉😊

— 28.04.2023 18:09

28.04.2023 17:20