在克隆过程中更改div的文本

Question

我用ajax调用追加了div ，为此我创建了一个虚拟div ， cloning了div并根据存在的JSON数据放置了数据。 我做了一个假的太（ 小提琴 ）。 每次我在div中将“ a”作为文本输入时，都会出现这种情况。 我想如果JSON具有特定值，则应更改文本（根据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');
    }    
})

小提琴

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'
})