Get quantity of items from a ul

Asked

Viewed 119 times

-1

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: inserir a descrição da imagem aqui

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>
javascript jquery

  • Post HTML, it’s easier to help

  • Edit! my html this way because I am using Drag and Drop, the list 01 is being loaded by the bank already the list 02 is only a test but the idea is to be empty. However I can not bring the amount of result in the 02 list nor with the examples, I stand by and thank you.

  • Do not post code photo on some devices is difficult to read and cannot copy to a reply. Read No questions asked manual | Do not post code as image

1 answer

4


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

  • 1

    It served me well, thank you :)

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.