javascript - jQuery 克隆列表项在使用each() 函数时都获得相同的文本值

Question

我正在尝试克隆 DOM 中的列表项，并根据变量 data 中使用each 函数的文本值数量将其追加多次。问题是所有新列表项都获得相同的文本值(所有列表项都设置为等于最后附加的列表项)。 我认为这与外壳有关，但我无法弄清楚。

谁能解释一下问题是什么？

谢谢!

数据:

    var data = {"text1": ["text1_row1", "text1_row2"], "text2": ["text2_row1", "text2_row2"], "text3": ["text3_row1", "text3_row2"] }

HTML:

    <ul>
        <li id="entryTemplate" style="display:none">
            <span class="text1"></span>
            <span class="text2"></span>
            <span class="text3"></span>
        </li>
    </ul>

Javascript:

function listData(data){
    $.each(data.text1, function(i) {
        var newDataRow = $('#entryTemplate').clone();   
        newDataRow.removeAttr('id')
             .removeAttr('style')
             .removeAttr('class')
             .addClass('copy')
             .appendTo('ul')
             .find('.text1').text(data.text1[i])
             .find('.text2').text(data.text2[i])
             .find('.text3').text(data.text3[i]);
    });
}

$.fn.clone = function(){
    var ret = $();
    this.each(function(){
        ret.push(this.cloneNode(true))
    });
    return ret;
};

所需的 HTML:

    <ul>
        <li id="entryTemplate" style="display:none">
            <span class="text1"></span>
            <span class="text2"></span>
            <span class="text3"></span>
        </li>
        <li class="copy">
            <span class="text1">text1_row1</span>
            <span class="text2">text2_row1</span>
            <span class="text3">text3_row1</span>
        </li>
        <li class="copy">
            <span class="text1">text1_row2</span>
            <span class="text2">text2_row2</span>
            <span class="text3">text3_row2</span>
        </li>

    </ul>

我得到的结果(所有 li 项目都获取 row2 的文本):

    <ul>
        <li id="entryTemplate" style="display:none">
            <span class="text1"></span>
            <span class="text2"></span>
            <span class="text3"></span>
        </li>
        <li class="copy">
            <span class="text1">text1_row2</span>
            <span class="text2">text2_row2</span>
            <span class="text3">text3_row2</span>
        </li>
        <li class="copy">
            <span class="text1">text1_row2</span>
            <span class="text2">text2_row2</span>
            <span class="text3">text3_row2</span>
        </li>

    </ul>

Answer 1

你的问题有点模糊，不太清楚你想要的结果是什么。除此之外，我在你的代码中看到了一些可能导致它的原因。尝试一下并让我知道发生了什么。

当你这样做时

$.each(data.text1, function(i) {

更改为

$.each(data.text1, function(pos, element) {

并将 [ i ] 替换为 [element]。

根据JQuery API，当执行EACH循环时，第一个返回的是数组中的位置，第二个返回的是值本身。