-1

Procurei pelo site antes de fazer essa pergunta e acho que o que mais se parece com meu problema é isso: Pegar valores de uma lista dinâmica

Porém não me serviu, acredito que o quero fazer é algo simples eu que estou começando agora e sou leigo, bom eu populo uma lista html com o conteúdo do meu banco, eu consegui pegar o nome do conteúdo dentro da lista usando isso:

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

Acontece que o que eu realmente precisava era da quantidade de itens na lista e não de seus respectivos nome, alguém tem ideia de como prosseguir?

Eu tentei algo como isso: inserir a descrição da imagem aqui

Meu 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>
3
  • Posta o HTML, fica mais fácil de ajudar 29/01/2020 às 15:31
  • Edit! meu html esta dessa forma pois estou usando Drag and Drop, a lista 01 está sendo carregada pelo banco já a lista 02 é somente um teste mas a ideia é ela estar vazia. Porém n consigo trazer a quantidade de resultado na lista 02 nem com os exemplos, fico no aguardo e obrigado. 29/01/2020 às 15:37
  • Não publique foto de código, em alguns dispositivos é difícil de ler e não tem como copiar para uma resposta. Leia Manual de como não fazer perguntas | Não publicar código como imagem 29/01/2020 às 15:38

1 Resposta 1

4

Você pode buscar o elemento e usar a propriedade children que retorna todos os itens filhos dele, no resultado tem a propriedade length que tem a quantidade.

Fiz tanto pelo elemento quanto pelos filhos, a busca #table12 > li retorna uma lista, sendo todos li filhos de table12

O length só vai estar disponível quando você obtiver uma lista de 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>

Fiz com JQuery também, note que no caso, para obter os filhos, precisei chamar como função .children()

Obs.: Usei o querySelector e o querySelectorAll que permite retornar o primeiro item e vários itens respectivamente com base na query css passada

1
  • 1
    Me serviu muito bem, obrigado :) 30/01/2020 às 13:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .