javascript - 在克隆期间更改 div 的文本

Question

我在 div 后附加了 ajax 调用，为此我制作了一个虚拟 div，我正在克隆 div 并根据当前数据 JSON 放置数据。我做了一个dummy也是(fiddle)。每次我将“a”作为文本放入 div 时，都会出现在这个 fiddle 中。我想如果 JSON 有特定的值那么文本应该改变(根据 fiddle 如果 i 的值为 4 那么文本应该是 'b' 而不是 'a')..那么怎么做.以下是我的代码(我的代码太大所以我放了虚拟表格)..HTML:

<div class="wrp"></div>
<div class="childd"></div>

CSS:

.wrp{
  background-color:#aaf;
  border:1px solid orange;
  float:left;width:100%
}
.wrp .child{
  float:left;
  height:20px;
  width:20px;
  background-color:#77c;
  border:1px solid #cdcdcd;
}
.childd{
  height:20px;
  width:20px;
  background-color:#cdcdcd;
}

JS:

$('.childd').on('click',function(){
    for(i=0;i<=9;i++){
        $('.childd')
            .clone()
            .removeClass('childd')
            .addClass('child')
            .html('a')
            .appendTo('.wrp');
    }    
})

Fiddle

Answer 1

如果愿意，您可以将一个函数传递给html()。返回值将是应用的值，当然:

$('.childd').on('click',function(){
    for(i=0;i<=9;i++){
        $('.childd')
            .clone()
            .removeClass('childd')
            .addClass('child')
            .html(function(){
                return i==4 ? 'b' : 'a'   
            })
            .appendTo('.wrp');
    }    
})

JSFiddle

---

如果您想在 .html() 中返回一个克隆的元素，可以用完全相同的方式完成:

.html(function(){
    return i==4 ? $(elem).clone() : 'a'
})