Wie erzeuge ich Listenelemente, deren (Text-) Inhalt dem Listenelement-ID-Attribut einer anderen Liste entspricht?

Question

Ich habe eine fest codierte Liste, von der jedes Listenelement eine ID hat. Ich möchte haben jQuery Listenelemente in einer anderen Liste erzeugen, und als den Textinhalt der die ID-Attributwerte von jedem der hartcodierte Liste der Elemente einstellen:

dh hartcodierte Liste:

<ul class="gallery"> 
    <li id="1"></li> 
    <li id="2"></li> 
    <li id="3"></li> 
</ul> 

jQuery -Generated Liste:

<ul class="galleryNav"> 
    <li>Slide 1</li> 
    <li>Slide 2</li> 
    <li>Slide 3</li> 
</ul> 

ich habe jQ die Anzahl der Galerie Artikel bekommen ...

var ListItemCount = $('ul.gallery').children().size('li'); 

... Hier ist das Problem: Wie erhalte ich jQuery, um die IDs der Listenelemente zu erhalten, während es die Nav-Liste erzeugt (siehe unten)?

var ListItemIndex = $('ul.pofo li').attr('id'); 
var listItem = '<li>Slide #' + ListItemIndex + ' of ' + $('ul.gallery li').length + ' list items!</li>'; 

dies ist die Erzeugung der nav Liste jedoch der Inhalt in jeweils gleich in Bezug auf var ListItemIndex

$("ul.gallery li").each(function (i) { 
    i = i+1; 
    $('ul.galleryNav').append(listItem); 
}); 

Die Ergebnisse der obigen Code erzeugt die Liste wegen meiner blinden Fleck ist aber die ganze Liste Inhalt der Elemente ist der gleiche, "Slide # 1 of 3 items".

Vielen Dank im Voraus! Hier

SVS

Answer 1

ist die jsFiddle. Der Code:

var listItemCount = $('.gallery').children().size('li'); 

$('.gallery li').each(function() { 
    $('.galleryNav').append(
     '<li>Slide #' + $(this).attr('id') + ' of ' 
      + listItemCount + ' list items!</li>'); 
}); 

Der Code hatte die richtigen Grundlagen, müssen Sie nur das Anfügen an die each Funktion bewegen, die für jedes Listenelement ausgeführt wird. Auf den Artikel kann dann mit $(this) zugegriffen werden.

Answer 2

Ich würde vorschlagen:

var newUl = document.createElement('ul'); // It's marginally faster to create elements without jQuery. 
newUl.id = 'galleryNav'; // setting the id of the element. 
var count = $('.gallery li').length; // retrieving the number of list items 
$('body').append(newUl); // appending the created <ul> to the body 

$('.gallery li').each(
    function(i){ // iterating through each of the li eleents of the .gallery list 
     var li = document.createElement('li'); // creating a new list-element 
     // using the i variable returned by the each() function, adding 1 to counter JavaScript's zero-based numbering 
     // and appending that created element to the galleryNav 
     $(li).text('Slide ' + (i+1) + ' of ' + count).appendTo('#galleryNav'); 
    }​​​​​​​​​​​​​​​​​​​​​​​​​​​);​ 

JS Fiddle demo.

Referenzen:

• append().
• appendTo().
• document.createElement().
• each().

Answer 3

Ich würde es nicht in der Schleife anhängen, sondern eine Zeichenfolge konstruieren und sie anhängen, wenn sie fertig ist. Es ist viel schneller, als es für jeden li in der Galerie anzuhängen.

var newList = "<ul class='galleryNav'>"; //starting the list 

$(".gallery li").each(function(i){ //looping your gallery elements 
    newList += "<li>Slide" + this.id || i + "</li>"; //extending the list 
}); 

$("body").append(newList += "</ul>"); //appending the list to the body or whatever 

Demo:

http://jsfiddle.net/meo/yKgSf/

oder die Phantasie Version (da lange Strings mit JS Konstruktion langsam sein kann)

var newList = []; // creating a empty array 

$(".gallery li").each(function(i){ //looping your gallery list 
    newList.push("<li>Slide" + this.id || i + "</li>"); //extending the array 
}); 

$("body").append("<ul class='galleryNav'>" + newList.join("") + "</ul>"); //joining the array and append it to the body 

Demo: http://jsfiddle.net/meo/yKgSf/2/

PS : Nur eine Nummer als ID ist nicht W3C in HTML4 gültig. Deshalb wähle ich den Index alternativ, wenn es keine ID auf dem Element gibt