für jede() auf Listenelement zur Ausgabe zählen mit JQuery

Question

ich folgendes haben:

<ul> 
<li>one</li> 
<li>Two</li> 
<li>three</li> 
<li>four</li> 
<li>five</li> 
<li>six</li> 
</ul> 

<div id="output"> 
</div> 

I ausgegeben werden soll eine weitere Liste (#output) basierend auf der Anzahl von lis.I nicht mein Gehirn wrapt kann um genau was zu verwenden. Denke, es wäre „die Anzahl der lis in diesem ul zählen sein, dann für jeden, Ausgabe der Zählung/Index in die #output div.

Jede Hilfe sehr geschätzt wird.

Answer 1

verwenden könnte könnte Sie versuche es etwas wie dieses:

$('#output').append('<ul>'); 
$('ul li').each(function(){ 
    $('#output ul').append('<li></li>'); 
}); 
$('#output').append('</ul>'); 

Offensichtlich, Justage es, wie auch immer Sie brauchen. Außerdem benötigen Sie eine Kennung auf der ursprünglichen ul.

Answer 2

Wenn Sie die Zählung ausgegeben werden soll von [li] Sie nicht each() benötigen, können Sie einfach .length Eigenschaft, in Ihrem Fall diese Aussage Rückkehr 6.

$('li').length; 

So Ihr Skript

$('#output').text($('li').length); 

Answer 3

Bitte prüfen Sie das folgende Snippet.

Es gibt zwei Möglichkeiten, die Gesamtzahl der li in Ul.

1. $ ("ul li"). Länge;
2. $ ("ul li"). Größe();

$(document).ready(function(){ 
 
    alert($('ul li').length); 
 
    alert($('ul li').size()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>one</li> 
 
    <li>Two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
</ul> 
 

 
<div id="output"> 
 
</div>

Answer 4

Versuchen Sie, diese

$(document).ready(function() { 
    var n = $("li").length; 
    $("div#output").text("There are " + n + " list items"); 
}); 

https://jsfiddle.net/wgzwzgLc/6/

Answer 5

Wenn Sie den Index des aktuellen enumerator erhalten möchten Sie .index tun können ($ (this)) innerhalb Ihrer .each() Funktion. Zum Beispiel:

var tmpElementIndex = {}; 
 
var $listItems = $('ul li'); 
 

 
$listItems.each(function(){ 
 
    tmpElementIndex = $listItems.index($(this)) + 1; 
 
    $('.other').append('<p>' + tmpElementIndex + ' of ' + $listItems.length + '</p>'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third</li> 
 
</ul> 
 

 
<div class="other"> 
 
</div>

Dies kann sicherlich für eine bessere Effizienz verbessert werden, aber Sie bekommen die Idee.