2016-08-15 7 views
1

ich mehrere ul Listen wie unten haben:jquery jede Funktion Schleife

<ul> 
    <li><a href="#page/"></a></li> 
    <li><a href="#page/"></a></li> 
    <li><a href="#page/"></a></li> 
    <li><a href="#page/"></a></li> 
    <li><a href="#page/"></a></li> 
</ul> 

<ul> 
    <li><a href="#page/"></a></li> 
    <li><a href="#page/"></a></li> 
    <li><a href="#page/"></a></li> 
</ul> 

<ul> 
    <li><a href="#page/"></a></li> 
    <li><a href="#page/"></a></li> 
</ul> 

Ich möchte die Gesamtzahl der li zählen und von 1 bis Gesamtzahl die Anzahl innerhalb einer Spanne und aktualisieren Sie die href-Tag des hinzufügen a wie unten:

<ul> 
    <li><a href="#page/1"><span>1</span></a></li> 
    <li><a href="#page/2"><span>2</span></a></li> 
    <li><a href="#page/3"><span>3</span></a></li> 
    <li><a href="#page/4"><span>4</span></a></li> 
    <li><a href="#page/5"><span>5</span></a></li> 
</ul> 

<ul> 
    <li><a href="#page/6"><span>6</span></a></li> 
    <li><a href="#page/7"><span>7</span></a></li> 
    <li><a href="#page/8"><span>8</span></a></li> 
</ul> 

<ul> 
    <li><a href="#page/9"><span>9</span></a></li> 
    <li><a href="#page/10"><span>10</span></a></li> 
</ul> 

Wie kann ich dies mit jquery erreichen?

Antwort

3

Dies sollte es tun:

$('li').each(function (i) { 
    i++; 
    var link = $(this).find('a'); 
    link.attr('href', link.attr('href') + i); 
    link.append('<span>' + i + '</span>'); 
}); 

In dem obigen Code uns:

  • Iterate über jedes Listenelement auf der Seite jQuery mit .each() Funktion
  • Erhöhen Sie den Wert von i von 1 , so dass wir von 1 statt von 0
  • zählen können. Wählen und speichern Sie einen Verweis auf das Verknüpfungselement innerhalb des aktuellen Listenelements t Hut wir zur Verwendung von jQuery .find() Methode
  • Aktualisieren Sie den Wert des Attributs href mit jQuery .attr() Methode
  • Und schließlich ein span-Tag mit dem Verbindungselement anzuhängen, mit dem Wert von i als seinen Inhalt mit jQuery .append() Methode sind Iterieren