Jquery - добавить выбранные элементы в промежутки

Question

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

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

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

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

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

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

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

Answer 1

Я не совсем уверен, что именно вы надеетесь достичь, но вам нужно что-то, похожее на это:

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

Answer 2

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

//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 3

Что-то вроде

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

Примечание

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