Javascript jQuery克隆的列表项在使用每个（）函数时都会获得相同的文本值

我尝试在DOM中克隆一个列表项，并使用each函数根据变量数据中文本值的数量多次追加它。问题是所有新列表项都获得相同的文本值（所有列表项都设置为等于最后附加的列表项）。 我想这和外壳有关，但我想不出来

有人能解释问题出在哪里吗

谢谢

数据：

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

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

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;
};

    <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>

    <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>

HTML:

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

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

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;
};

    <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>

    <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>

所需的HTML:

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

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

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;
};

    <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>

    <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>

文本1_行1
文本2_第1行
文本3_第1行


文本1_第2行
文本2_行2
文本3\u行2

我得到的结果（所有li项都得到第2行的文本）：

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

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

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;
};

    <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>

    <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>

文本1_第2行
文本2_行2
文本3_第2行


文本1_第2行
文本2_行2
文本3_第2行

你的问题有点模糊，不太清楚你想要的结果是什么。显然，我在你的代码中看到了一些可能是原因。试试看，告诉我发生了什么事

当你这样做的时候

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

换成

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

并将[i]替换为[element]

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

更新的答案：

您的数据对象变量格式错误。。。看起来您希望数据对象的每个值都是一个数组（使用花括号表示您正在定义一个带有键的对象），因此您应该使用方括号

[]

。看

jQuery已经有了一个函数，所以不需要用自己的函数重写

根据您提供的数据，您希望迭代

data

变量本身，而不是

data.text1

。然后，您可以通过当前索引的值（这是传递给

.each（）

）的第二个参数）获取文本值，并引用

[0]

和

[1]

以获取实际文本

$.each(data,function(i,value){
  console.log(value);
  var newDataRow = $("#entryTemplate").clone();
  newDataRow
  .removeAttr('id')
  .removeAttr('style')
  .removeAttr('class')
  .addClass('copy')
  .appendTo('ul');
  newDataRow.children('.text1').text(value[0]); // value[0] == data[i][0]
  newDataRow.children('.text2').text(value[1]);
});

---

我更新了这个问题，试图使它不那么模糊。我想使用数组的位置，因为我需要使用它从json数组中获取其他文本元素。我尝试使用add函数，但仍然无法使其工作。我更新了我的问题，以明确我的目标和问题…对不起，我的错误。。。我的数据对象变量的格式确实是这样的。此外，我意识到我使用了Zepto，当我删除克隆功能时，它就不再工作了。我将尝试jQuery，看看这是否有效。。