Question

Using jQuery, what would be the most efficient way to find the first two children of a parent element, if one is an h1 and the other is a p. My code isn’t working right now, and I would like to accomplish this using best practices.

CSS

div > *{
    display: none;
}

HTML

<div>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

<div>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

Javascript

$('div h1').show();    
$('div p:first-child').show();

Edit I’m actually working with multiple DIVs. I didn’t think it would make a difference, but it looks like I was wrong.

Answer 1

Try,

$('div').children().slice(0,2).show();

Incase if you have more that 1 div, then try like below,

$('div').each (function () {
    $(this).children().slice(0,2).show();
});