jQuery - получить первый абзац

#javascript #jquery

Вопрос:

У меня есть следующий код

 <div class="side-box">
    <h1>Main Title</h1>
    <h2>Secondary Title</h2>
    <p>
        This is paragraph 1<br><br>
        This is paragraph 1<br><br>
        This is paragraph 3<br><br>
</div>

Я пытаюсь написать функцию jQuery, которая будет отображать что-либо вплоть до первого абзаца, а затем отображать остальное при нажатии на ссылку «Подробнее».

Содержимое генерируется редактором WYSIWYG, иначе я уверен, что смог бы создать эту функцию самостоятельно.

1. В чем разница между контентом, созданным редактором, и фиксированным контентом? Предполагая, что это исправлено, как бы вы создали функцию, о которой вы говорите?

2. Привет, контент, созданный редактором, использует теги разрыва, а не p-теги.

3. Ваш HTML-код плохо отформатирован. Вы никогда не закрываете <p>. Кроме того, возможно, вы захотите уточнить, говорите ли вы об абзаце текста или на самом деле о теге <p>.

Ответ №1:

 $('.side-box > p').not(':first-child').hide();

Но у вас в коде не более 1 абзаца, вы имеете в виду после первого разрыва (br)?

Вы можете удалить все после первого BR, используя:

 var str = $('.side-box p').html();
var substr = str.split('<br>');
$('.side-box p').html(substr[0]);

Он выполняет поиск в P и разделяет его по тегам BR.

Затем мы берем первое разделение и заменяем на него содержимое p 🙂

Ответ №2:

Обновить:

Я только что заметил, что абзацы на самом деле не являются абзацами в смысле p тегов (которые определяют абзац в разметке) — хотя то, что вы просите, все равно будет возможно, было бы разумнее исправить способ разбиения содержимого на абзацы в вашем редакторе.

Следующее должно поставить галочку…

 var paragraph = $("p:eq(0)").html();

Хотя вы, возможно, захотите поиграть с вызовами html() , text() и val() , я никогда не получаю правильный с первого раза.

Ответ №3:

Добавьте «показывать ссылку» для всех абзацев и скройте сам абзац:

 var paragraphs = $(".side-box > p");
paragraphs.before(function () {
    return $("<a>Read more</a>").click(function () {
        // hide the "Read more" link. Alternatively, use .remove() to remove the link
        $(this).hide();
        // this link was inserted before the paragraph, so displaying the next element
        // (= paragraph)
        $(this).next().show();
    });
});
// hide the paragraphs which are now preceded by a "Read more" link
paragraphs.hide();

Пример на JSFiddle

Ответ №4:

Пример работы с вашим текущим HTML.

 $('.side-box p').first().each(function(i,e){
    htmlchunks = $(this).html().split('<br><br>');
    first_part = htmlchunks.shift();
    secondpart = $('<div class="hidden"/>').hide().html(htmlchunks.join('<br><br>'));
    $(this).html(first_part   '<a class="readmore">read more</a>').append(secondpart);
});

$('.readmore').click(function(){
    $(this).next('.hidden').show();
    $(this).detach();
});

Однако, блин.

Ответ №5:

Вы можете сделать это с помощью CSS (IE > = 9, из-за первого в своем роде) — для справочной поддержки проверки здесь — Могу ли я использовать первый в своем роде

 .side-box p:first-of-type ~ * {
    display:none;
}

Комбинатор ~ разделяет два селектора и сопоставляет второй элемент, только если ему предшествует первый, и оба имеют общего родителя. (IE 7 )

Общая документация по родственным селекторам