jQuery .append (function (index, html) {...}) вопрос - PullRequest
Новая
       7

jQuery .append (function (index, html) {...}) вопрос

0 голосов
/ 06 августа 2010

Допустим, у нас есть этот неопознанный 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 и хотим добавить DIV SPAN-контейнера следующим образом: 

 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 () приходится делать на каждой итерации массива значений, если цель состоит в том, чтобы обернуть каждое из значений в массиве в SPAN и вставить этот интервал в контейнер?

Спасибо

1 Ответ

0 голосов
/ 06 августа 2010 
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). Если заказ важен, используйте standard for loop.

...