Скрыть содержание после 3 абзацев <p>

Question

Работа с API, который выплевывает содержимое в тегах p ... но становится слишком длинным.Думать о том, чтобы скрыть их при достижении предела в 400 символов, но это не очень хорошая идея, поскольку есть вероятность, что он пробьет HTML-тег.

Поэтому я пытаюсь скрыть остальную часть содержимого после 3-х абзацев вместо текста с текстом «Подробнее», который покажет остальную часть содержимого.Как можно это сделать?

Answer 1

Вы можете использовать :gt() selector, а затем .hide() или .remove() их:

var $content = $("#content");
$content.find("p:gt(2)").hide();

Или вы можете просто скрыть все дочерние элементы, кроме третьего, используя .children() и .slice(3):

$content.children().slice(3).hide();

Если вы храните скрытые элементы, вы даже можете легко создать кнопку «Читать далее»:

var $content = $("#content");
var $hiddenText = $content.children().slice(3).hide();
if ($hiddenText.length) {       
    var $button = $("<a href='#'>Read More...</a>").click(function() {
        $hiddenText.show();
        $button.remove();
        return false;
    }).appendTo($content);
}

Просмотреть демонстрацию jsFiddle

Answer 2

<div><p></p><p></p><p></p><p></p><p></p>
    <a href="#readMore" class="readMore">Read More</a>
</div>

если у вас есть такая структура, вы можете

$('div p:nth-child(3)').nextAll('p').hide();

и

$('a.readMore').click(function(){
    $(this).siblings('p').show();
    return false;
})

ресурсы: - .nextAll ()

Answer 3

Это немного обратный подход, но сделайте что-то вроде этого.

<style>
#con p{
  display:none;
}
</style>

<div id='con'>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Затем попросите jquery выбрать первые три тега p и настроить отображение на блокировку.

Кроме того, вы можетеиспользуйте

<style>
#con{
  overflow:auto;
  max-height:300px;
}
</style>

И вам не придется беспокоиться об этом.