CODEWITHSUNDEEP
javascriptjqueryhtmlcss
paulkennethkent
paulkennethkent

Reputation: 39

Loading div with only a portion of the paragraph text

I am trying to create a headline news feed for my home page by using the Jquery .load function.

I am loading the page news.html and I can target the first elements (the latest news stories). 

$( "#headline" ).load( "news.html .media-left:first, .media-body:first", function() {

    $( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");

});

but what I can't figure out is how to only pick up the div and the first two paragraphs within that div, so that I can create a read more button to take them to the main news.html, every time I try to reference a portion of the paragraphs, it only includes the paragraph and doesn't include the div media.body which has the styles attached to it. 

<div class="media menu-center">
    <div class="media-left">
        <div class="donut-yellow">
        <h4>
            <span class="month">May</span>
            <span class="day">23rd</span>
        </h4>
    </div>
    </div>
    <div class="media-body media-right ">
       <p class="media-heading"><strong>e </strong></p>
       <p>Welcome to the brand new ****!</p><p>To ensure that we continue to(...)</p>
       <p>Take a look around the new layout and make sure to keep an eye on this(...)</p>

       <span class="pull-right"><p class="bg-success"><strong>Paul</strong></p></span>
    </div>
</div>

Upvotes: 0

Views: 185

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

This selector seems to work:

$( "#headline" ).load( "news.html .media-body>p:nth-child(-n+2)", function() {

    $( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");

});

I've tested it in this Fiddle.

It returns:

e

Welcome to the brand new ****!

Upvotes: 2

Related Questions