Home / Questions / 350444
Accepted
Jose Dario Correa
Asked: 2020-04-29 12:31:18 +0800 CST 2020-04-29 12:31:18 +0800 CST

Find out how many <p>s a <div> has [closed]

  • 772

I need to know how many <p>has a <div>, example:

<div class="body">
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span>
    <div class="paragraphs">
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    </div>
</div>

I am only interested in knowing the amount of <p>it has <div class="body">more, not the ones that others contain <div>. In this case the result would have to be 5 and not 6.

javascript

2 Answers

  1. Best Answer

    Use document.querySelectorAll('.body > p')to get all the paragraphs inside the div with class bodyand there you have the count. The >is to include only the direct paragraphs, without it, the one inside would also count paragraphs:

    let ps = document.querySelectorAll('.body > p');
console.log(ps.length);
    <div class="body">
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span>
    <div class="paragraphs">
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    </div>
</div>

    • 3

  2. you can try with

    $('div.body').find('p').length

    EDIT

    the above answer will return all the elements p, if you only want the body div thing, then with

    $('div.body').children('p').length

    console.log($('div.body').children('p').length)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="body">
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    <span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span>
    <div class="paragraphs">
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
    </div>
</div>

    Keep in mind that if there is another divwith the same class body, it can cause problems, it would be best to put an id

    P.S. Triby's solution seems more appropriate to me since it is pure js, anyway I leave this with JQuery in case you need it

    • 0