JQuery - Добавить выбранные элементы в промежутках

Question

Я пытаюсь выбрать все элементы, имеющие класс, получить их идентификаторы (если они есть) и добавить отдельные промежутки в конец моего документа на основе этой информации. Это, насколько мне удалось получить:

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

Я надеюсь добавить промежуток для каждого элемента собраны. Вот некоторые примеры формата поверочного я хочу достичь:

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

Если возможно, я хотел бы, чтобы для элементов без ID должен быть отформатирован следующим образом:

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

Я действительно ценю помощь, поскольку я очень новичок в jQuery и пытаюсь учиться.

Answer 1

Это работает и также быстро, как это лучше вставляйте все промежутки одновременно как один блок.

//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("")); 

Проверить http://jsbin.com/etafe для демо

Answer 2

Что-то вроде

$(".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"); 
}); 

Примечание

Вы должны быть уверены в том, что идентификаторы должны быть уникальными в этом документе, и никакие два элемента не имеют один и тот же идентификатор.

Answer 3

Я не совсем уверен, что именно you'le надеясь достигнуть, но вы хотите что-то, что выглядит примерно так:

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