#javascript #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 🙂
Комментарии:
1. привет, да, редактор не генерирует теги 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();
Комментарии:
1. Это почти идеально. Можем ли мы заставить его отображать первый абзац также перед ссылкой «подробнее»?
Ответ №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 )