Get quantity of items from a ul

Question

I searched the site before asking that question and I think what else looks like my problem is this: Get values from a dynamic list

But it didn’t suit me, I believe I want to do it is something simple I’m starting now and I’m layman, well I populate an html list with the contents of my bank, I managed to get the name of the content inside the list using this:

var listClientes = document.getElementById('sortable12').innerText;

Turns out what I really needed was the amount of items on the list and not their respective name, someone has an idea of how to proceed?

I tried something like this:

My HTML:

<!--LISTA 01-->
        <label style="float:left; margin-top:80px; margin-left: 40px; color: green">Disponiveis:</label>
        <ul id="sortable11" class="connectedSortable ui-sortable" style=" margin-top: 100px"> </ul>

        <!--LISTA 02-->
        <label style="float:right; margin-right: 390px; margin-top:-360px; display:block; color: red">Ultilizados:</label>
        <ul id="sortable12" class="connectedSortable ui-sortable" style="float:right; margin-left:500px; margin-top:-340px">
            <li class="ui-state-default ui-sortable-handle">Item 6</li>
            <li class="ui-state-default ui-sortable-handle">Item 7</li>
            <li class="ui-state-default ui-sortable-handle">Item 8</li>
            <li class="ui-state-default ui-sortable-handle">Item 9</li>
            <li class="ui-state-default">Item 10</li>
        </ul>

Answer 1

You can fetch the element and use the property children that returns all his child items, the result has the property length that has the amount.

I did as much for the element as for the children, the search #table12 > li returns a list of all li children of table12

The length will only be available when you get a list of items

//Buscando direto pelos filhos e usando o length

const items = document.querySelectorAll('#sortable12 > li');
console.log(items.length)

// Buscando o item e buscando pela propriedade children
const sortable = document.querySelector('#sortable12');
console.log(sortable.children.length);

// Usando JQuery
const itemComJquery = $('#sortable12');
console.log(itemComJquery.children().length);

const itemsComJquery = $('#sortable12 > li');
console.log(itemsComJquery.length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--LISTA 01-->
    <label style="float:left; margin-top:80px; margin-left: 40px; color: green">Disponiveis:</label>
    <ul id="sortable11" class="connectedSortable ui-sortable" style=" margin-top: 100px"> </ul>

<!--LISTA 02-->
    <label style="float:right; margin-right: 390px; margin-top:-360px; display:block; color: red">Ultilizados:</label>
    <ul id="sortable12" class="connectedSortable ui-sortable" style="float:right; margin-left:500px; margin-top:-340px">
        <li class="ui-state-default ui-sortable-handle">Item 6</li>
        <li class="ui-state-default ui-sortable-handle">Item 7</li>
        <li class="ui-state-default ui-sortable-handle">Item 8</li>
        <li class="ui-state-default ui-sortable-handle">Item 9</li>
        <li class="ui-state-default">Item 10</li>
    </ul>

I did it with Jquery also, note that in case, to get the children, I needed to call as function .Children()

Note: I used the querySelector and the querySelectorAll which allows you to return the first item and several items respectively based on the last css query