javascript - jQuery - get first paragraph - Stack Overflow

admin管理员组

文章数量:1335861

I have the following code

<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>

I'm trying to write a jQuery function that will display anything up to the first paragraph and then display the rest when a 'read more' link is clicked.

The content is generated by a WYSIWYG editor, otherwise i'm sure I would be able to create this function myself.

I have the following code

<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>

I'm trying to write a jQuery function that will display anything up to the first paragraph and then display the rest when a 'read more' link is clicked.

The content is generated by a WYSIWYG editor, otherwise i'm sure I would be able to create this function myself.

• javascript
• jquery

Share Improve this question Follow edited Oct 18, 2011 at 11:18 vzwick 11.1k55 gold badges4646 silver badges6363 bronze badges asked Oct 18, 2011 at 10:50 twsJamestwsJames 42522 gold badges77 silver badges1111 bronze badges 3

• What's the difference between content generated by an editor and fixed content? Assuming it is fixed how would you create the function you are talking about? – Felix Kling Commented Oct 18, 2011 at 10:52
• Hey, The content generated by the editor uses break tags rather than p tags. – twsJames Commented Oct 18, 2011 at 10:59
• Your HTML is badly formatted. You never close the <p>. Also, perhaps you might want to clarify whether you are talking about a paragraph of text or actually the <p> tag. – mydoghasworms Commented Oct 18, 2011 at 11:00

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

But you dont have more than 1 paragraph in your code, do you mean after first break(br)?

---

You can remove everything after first BR by using:

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

It searches the P, and splits it by the BR tags.

Then we take the first split and replace the p content with it :)

UPDATE:

I just noticed the paragraphs aren't actually paragraphs in the sense of p tags (which define a paragraph in mark-up) - though what you ask for will still be possible, it might be a better consideration to fix the way content is being paragraphed in your editor.

---

The following ought to do the tick...

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

Though you might want to play with html(), text() and val() calls, I never get the correct one first time.

Add a "show link" for all paragraphs and hide the paragraph itself:

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();

Example on JSFiddle

Example working with your current 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();
});

Yikes, though.

You can do this with CSS ( IE >= 9, because of the first-of-type ) - for reference check support here - Can I Use first-of-type

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

The ~ binator separates two selectors and matches the second element only if it is preceded by the first, and both share a mon parent. ( IE 7+ )

General sibling selectors documentation

本文标签： javascriptjQueryget first paragraphStack Overflow