하나의 DOM 요소를 jQuery 객체의 배열로 대체하려면 어떻게해야합니까?

Question

필자는 빌드하고 이벤트를 첨부 한 jQuery 객체 배열을 가지고 있습니다.

var obs = []; 
for(var i=0;i<100;i++) { 
    var j = jQuery('<div></div>'); 
    j.click(function() { console.log('Clicked ' + i); }); 
    obs.push(j); 
} 

내 HTML은 다음과 같습니다

<div id="replaceme"></div> 

는 어떻게 배열의 모든 jQuery를 객체와 페이지의 사업부를 대체 할 수 있습니까? 이벤트 핸들러를 보존하기 때문에 HTML을 연결하고 싶지 않습니다.

Answer 1

당신은이 작업을 수행하여 jQuery를 요소의 배열 요소를 대체 할 수 있습니다 : 귀하의 경우

$(theElement).replaceWith(theArryaOfjQueryElements); 

을,이다 :

$('#replaceme').replaceWith(objs); 

는 jQuery.replaceWith() 방법을 참조하십시오.

j.click(function() { console.log('Clicked ' + i); }); 

이 항상 Clicked 100을 인쇄합니다 :

---

은 BTW 여기에 오류가 있습니다. 그 이유는 함수가 값이 아닌 i에 대한 참조를 닫는 것입니다. 따라서이 함수가 호출되기 전에 i이 수정되면이 함수는 i의 새 값을 보게됩니다.

대신이 작업을 수행해야한다 : 제공된 새로운 컨텐츠와 일치하는 요소의 집합의 각 요소를 대체

(function(i) { 
    j.click(function() { console.log('Clicked ' + i); }); 
}(i)); 

Answer 2

사용 replaceWith의 jQuery 방법.

var $obj = jQuery();//This will create an empty jQuery object 
for(var i=0;i<100;i++) { 
    var j = jQuery('<div></div>'); 
    j.click(function() { console.log('Clicked ' + i); }); 
    $obj.add(j);//Using add method to add the jQuery object into $obj 
} 

$("#replaceme").replaceWith($obj); 

Answer 3

var obs = []; 
for(var i=0;i<100;i++) { 
    var j = jQuery('<div></div>'); 
    j.click(function() { console.log('Clicked ' + i); }); 
    obs.push(j); 
} 

$('#replaceme').html(objs); 
/* or */ 
$('#replaceme').replaceWith(objs); 

Answer 4

나는 한 번에 모든 요소를 ​​생성하는 것이 훨씬 더 빨리 하나 하나를 생성 한 후 것을 읽고. 클릭 기능을 사용하면 이전 형제를 모두 집계하여 색인을 얻을 수 있습니다.

var str = '' 
for (var i = 0; i < 100; i++) { 
    str += '<div></div>'; 
} 
var elem = jQuery(str); 
elem.click(function() { console.log('clicked '+jQuery(this).prevAll().length); }); 

jQuery('#replaceme').replaceWith(elem);