Jquery - Ajoute les éléments sélectionnés dans les travées

Question

J'essaie de sélectionner tous les éléments qui ont une classe, d'obtenir leur ID (s'ils en ont un) et d'ajouter des intervalles individuels à la fin de mon document en fonction de cette information. Ceci est aussi loin que j'ai réussi à obtenir:

var element = $(".foo"), 
    element_id = element.attr("id"), 
    span_id = "for-" + element + "-id-" + element_id, 
    ; 

J'espère ajouter une période pour chaque élément recueilli. Voici quelques exemples du format span Je souhaite obtenir:

<span id="for-img-id-profile"></span> 
<span id="for-div-id-content"></span> 

Si possible, je voudrais également permettre des éléments sans pièce d'identité pour être formaté comme ceci:

<span id="for-h1"></span> 

j'apprécie vraiment l'aide car je suis très nouveau à jQuery et j'essaie d'apprendre.

Answer 1

Cela fonctionne et est aussi rapide, car il vaut mieux insérer toutes les travées en une fois en un seul bloc.

//get .foo elements 
var eles = $('.foo').toArray(), spans = []; 
//create html-fragments for each found element 
//respecting if no id is found 
//no overhead in loop as no unneeded jQuery wrapping is used 
for(var i=0; i < eles.length; i++) { 
    var e = eles[i], 
     tmp = '<span id="for-'+e.tagName.toLowerCase(); 
    if(e.id) { 
     tmp += '-id-' + e.id; 
    } 
    tmp += '"/>'; 
    //collect html fragments in an array 
    spans.push(tmp); 
} 
//join the html-fragments with "no-space" and insert after div#content 
$("#content").after(spans.join("")); 

Vérifiez http://jsbin.com/etafe pour une démonstration

Answer 2

Quelque chose comme

$(".foo").each(function(index){ 
    var id = ""; 
    if($(this).attr("id") !== "") 
    { 
     id = "for-" + $(this).attr("id"); 
    } 
    else 
    { 
     id = "for-h" + index; 
    } 

    $("<span />").attr("id", id).after("#content"); 
}); 

Remarque

Vous devez être sûr que ids doit être unique dans le document, et pas deux éléments ont le même identifiant.

Answer 3

Je ne suis pas tout à fait certain précisément ce que you'le l'espoir d'accomplir, mais vous voulez quelque chose qui ressemble plus à ceci:

$('.foo').each(function() 
{ 
    var $this = $(this); 
    $('<span id="for-' + ($this.attr('id') || $this.get(0).tagName) + 
     '"></span>').appendTo($(document)); 
});