Вопрос по поводу .each
 

Добрый день.
Уважаемые форумчане, подскажите пожалуйста.
Есть вот такой js-код, добавляющий в DOM к каждому элементу input один span по соседству:

var switchedToSpanInput = {
	config : {
		wrapper : '.center'
	},
	link: $('<span/>')
		.addClass('to-edit')
		.text('somespan'),
	init : function(config){
		$.extend(switchedToSpanInput.config,config);
		$(switchedToSpanInput.config.wrapper)
			.find('input')
			.each(function(){switchedToSpanInput.appendLink(this);});
	},
	
	appendLink : function(switchedInput){
		$(switchedInput).parent().append(switchedToSpanInput.link);
	}
}

$(document).ready(function(){
	switchedToSpanInput.init();
}

В таком виде происходит следующее: к первому инпуту присоединяется спан, но в следующей итерации функции each он пропадает, и появляется возле второго инпута, на следующей итерации спан пропадает у второго и появляется у третьего. Таким образом спан остается только возле последнего инпута.

Если заменить .each

.each(function(){switchedToSpanInput.appendLink(this);});

на непосредственный вызов

.parent().append(switchedToSpanInput.link)

то все работает как надо.

В чем причина такого поведения?

SPAN-то у Вас один.
.each() — простой цикл. Каждый раз SPAN выдёргивается со старого места и ставится на новое.

var wrapper1 = document.createElement("DIV"),
    wrapper2 = document.createElement("DIV"),
    span = document.createElement("SPAN");
wrapper1.appendChild(span);
wrapper2.appendChild(span);
alert([wrapper1.childNodes.length, wrapper2.childNodes.length]);

Понял, спасибо.