用JavaScript在ul里面有多少li

Question

How can I know how many li there are inside in the first ul ?

I know I can use .length, but I want just the number of first-ul

<ul class="first-ul">
    <li>1</li>
    <li>2</li>
    <li>
        <ul class="second-ul">
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
</ul>

http://jsfiddle.net/5oykbysk/

Answer 1

Use > to get immediate children li :

alert(number = $('ul.first-ul > li').length);

FIDDLE:

http://jsfiddle.net/5oykbysk/1/

See JQUERY DOCS for details

Answer 2

[].filter.call(
    document.getElementsByClassName('first-ul')[0].children, 
    function (el) {
        return el.nodeName === 'LI';
    }
).length

Answer 3

use jQuery child selector . Try this:

$('ul.first-ul > li').length

DEMO

Answer 4

it's the best and easy way :

var x = document.getElementsByClassName(".first-ul").childElementCount;
alert (x);

Visit https://www.w3schools.com/jsref/prop_element_childelementcount.asp