1

我正在尝试在 DOM 中克隆一个列表项，并根据使用 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>
4

2 回答 2

0

你的问题有点模糊，不清楚你正在寻找的结果是什么。Appart 从那我看到你的代码中可能导致它的东西。试一试，让我知道发生了什么。

当你这样做

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

将其更改为

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

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

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

于 2013-03-19T01:03:26.510 回答
0

更新答案：

您的数据对象变量格式错误......看起来您希望数据对象的每个值都是一个数组（使用花括号意味着您正在定义一个带有键的对象），因此您应该使用方括号[]。参见数组与类数组对象

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

jQuery 已经有一个clone 方法，所以你不需要用你自己的方法覆盖。

根据您提供的数据，您希望迭代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]);
});
于 2013-03-19T01:22:36.583 回答