CODEWITHSUNDEEP
jquerycss-selectors
elkefreed
elkefreed

Reputation: 964

Get First (n) Elements From Inside a Parent Element in jQuery

I am trying to grab the first 4 elements from inside a parent div. When using slice, it instead returns all the children elements inside my div.

My jQuery:

var upperText = jQuery(".entry-text").slice(0,4).html();

The HTML

<div class="entry-text">
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
elit</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa 
<strong>strong</strong>. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus 
mus.</p>
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
elit</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
</p>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>

For example, in the HTML sample above, I just want everything through the second paragraph tag.

Upvotes: 0

Views: 40

Answers (2)

epascarello
epascarello

Reputation: 207501

Your code is filtering the elements you selected, it has nothing to do with the children. If you want the HTML, the easiest thing to do is clone the element and removing the elements you do not want.

const html = $(".entry-text").clone().find("> *:gt(3)").remove().end().html();
console.log(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry-text">
  <h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
  </h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
    <strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
  <h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
  </h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  </p>
  <h2>Aenean commodo ligula eget dolor aenean massa</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem.</p>
</div>

Upvotes: 1

Vincent M
Vincent M

Reputation: 166

I believe .entry-text.children() will return an element's children

var upperText = $(".entry-text").children().slice(0, 4);

Upvotes: 0

Related Questions