의 jQuery으로 .Append (기능 (인덱스, HTML) {...}) 질문

Question

의 우리가이 미확인 DIV

<div class="class-occurs-many-times-on-page">foo</div> 

을 가지고 우리가 바로 후 수십 포함 된 다른 정체 불명의 DIV를 배치 할 가정 해 봅시다 SPAN 요소 또는 수백 :

<div class="a-class-that-occurs-many-times-on-page">foo</div> 
<div class="another-class-that-occurs-many-times-on-page"> 
     <span class="latin">lorem</span><span class="latin">ipse</span> 
     <span class="swedish-chef">føø</span><span class="swedish-chef">bår</span> 
     . 
     . 
     . 
     <span>...</span> 
</div> 

우리가 처음 미확인 DIV를 추가하고 이런 식으로 SPAN-컨테이너 DIV를 추가 할 수있다 :

values = [{word: "lorem", cls: "latin"}, {word: "ipse", cls: "latin"}, 
{word:"føø",cls:"swedish-chef"}, {word:"bår",cls:"swedish-chef"}]; 

$("#" + someParentElement).append(
    $("<div></div>").addClass("a-class-that-occurs-many-times-on-page").text("foo").after(

      $("<div></div>").addClass("another-class-that-occurs-many-times-on-page").append(
       function(index, html){      
        // how to wrap each value in the values array in a span 
        // and inject each of those spans into this DIV? 

       } 
      ) 

    ) 


); 

이 접근이 가능합니까? 그렇다면 배열의 각 값을 다음과 같이 배열의 각 줄을 래핑하는 것이면 .append() 메서드 호출 내부의 함수가 값 배열을 반복 할 때마다 수행해야하는 작업은 무엇입니까? 스팬과 스팬을 컨테이너에 주입합니까? 당신은 작업의 종류를 달성 할 수 있었던 것처럼 단지 제안이다

감사

Answer 1

values = [{word: "lorem", cls: "latin"}, {word: "ipse", cls: "latin"}, {word:"føø",cls:"swedish-chef"}, {word:"bår",cls:"swedish-chef"}], 
len = values.length, 
$ctn = $('<div/>', { 
    class: 'another-class-that-occurs-many-times-on-page' 
}), 
buildarr = []; 

while(len--){ 
    buildarr.push('<span>'); 
    buildarr.push(values[len].word); 
    buildarr.push(values[len].cls); 
    buildarr.push('</span>'); 
} 

$ctn.append(buildarr.join('')).appendTo(document.body); 

. 우리가 배열을 채우는 순서는 (가장 빠른 방법으로 반복하여, reversed while) irrelavant라고 가정합니다. 순서가 중요한 경우 standard for loop을 사용하십시오.