Javascript 在jquery循环中克隆元素和修改将永远执行

我试图克隆一个元素，然后根据通过jquery在json请求中找到的结果修改其文本。然而，克隆将永远在每个循环中执行，并使我的浏览器崩溃。我不知道为什么，因为我以前没有使用过这个jquery特性，所以请原谅我的不理解

无论如何，这是我的代码

jQuery：

function buildFriendStatus() {
     $.getJSON('/members/feed/get-friend-status', function(data) {
        $.each(data, function(i, item) {
            var clone = $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin').clone();

            clone.find('h4').html(data[i].username);
            clone.find('p').html(data[i].status);
            clone.find('img').attr('src', data[i].images);

            clone.insertAfter('.w3-container.w3-card-2.w3-white.w3-round.w3-margin.user-status');
        }); 
    }).fail(function(response) {
        console.log(response.fail);
    }); 
}

setInterval(function() {
    buildFriendStatus();
}, 1000);

以及html元素

.clone（）

：

描述：创建匹配元素集的深度副本S

这意味着

clone（）

将复制与提供的选择器匹配的每个元素

发生的情况是，选择器在第一轮匹配单个元素，但一旦克隆添加到DOM中，第二次调用（1秒后）将匹配2个元素（原始+第一个克隆），依此类推

因此，使用

.last（）

将匹配限制为单个元素

更换这条线

为此：

将防止多项式增长插入

注:

jQuery.each（）

：

数组和具有length属性的类似数组的对象（例如函数的arguments对象）通过数值索引从0到length-1进行迭代。其他对象通过其命名属性进行迭代

因此，无论是数组还是对象，数据操作都是一样的

这就是说，如果您知道您正在操作数组，那么与jquerypolyfil相比，您更喜欢内置方法

演示 使用jQuery.each方法（我用简单超时代替了AJAX调用）

//缓存元素（jquery）引用
让$injectAfter=$（'.w3 container.w3-card-2.w3 white.w3 round.w3 margin.user status'）
//存根数据-根据PHP脚本输出
，jsonData={
反馈1：{
用户名：“蒂米”，
状态：[“我是吉米，测试”]，
图像：[“/images/profile/timmy/status/boned.jpg”]
},
反馈2：{
用户名：“Chuck”，
状态：[“卡盘，测试”]，
图像：[“/images/profile/timmy/status/boned.jpg”]
}
}
;
函数buildFriendStatus（）{
$。每个（jsonData，函数（键，项）{
让clone=$（'.w3 container.w3-card-2.w3 white.w3 round.w3 margin'）.last（）.clone（）；
clone.find（'h4'）.html（item.username）；
//状态是一个数组
//如果您认为合适，请进行更改，我们只接受第一个元素。
clone.find（'p'）.html（item.status[0]）；
//此处有进一步的克隆更改
// …
//最后，将节点附加到DOM中
clone.removeClass（'hide-me'）.insertAfter（$injectAfter）；
});
}
//只是为了增强演示效果
倒计时（10000）；
setInterval（函数（）{
buildFriendStatus（）；
倒计时（空）；
}, 10000);
//助手
函数倒计时（x）{
x&&（countdown.v=（x/1000）+1，countdown.cd=countdown.v）；
x==null&&（countdown.cd=countdown.v）；
（countdown.cd-1>0）和&--countdown.cd；
document.querySelector（'#counter'）.textContent=`调用${countdown.cd}s`中的服务器；
countdown.cd&（clearTimeout（countdown.t），（countdown.t=setTimeout（countdown，1000））；
}

.user status.w3半{边框半径：5px；边框：1px纯黑色；填充：3px}
.隐藏我{显示：无}

阻止“.用户状态”

喜欢
评论

.clone（）

：

描述：创建匹配元素集的深度副本S

这意味着

clone（）

将复制与提供的选择器匹配的每个元素

发生的情况是，选择器在第一轮匹配单个元素，但一旦克隆添加到DOM中，第二次调用（1秒后）将匹配2个元素（原始+第一个克隆），依此类推

因此，使用

.last（）

将匹配限制为单个元素

更换这条线

为此：

将防止多项式增长插入

注:

jQuery.each（）

：

数组和具有length属性的类似数组的对象（例如函数的arguments对象）通过数值索引从0到length-1进行迭代。其他对象通过其命名属性进行迭代

因此，无论是数组还是对象，数据操作都是一样的

这就是说，如果您知道您正在操作数组，那么与jquerypolyfil相比，您更喜欢内置方法

演示 使用jQuery.each方法（我用简单超时代替了AJAX调用）

//缓存元素（jquery）引用
让$injectAfter=$（'.w3 container.w3-card-2.w3 white.w3 round.w3 margin.user status'）
//存根数据-根据PHP脚本输出
，jsonData={
反馈1：{
用户名：“蒂米”，
状态：[“我是吉米，测试”]，
图像：[“/images/profile/timmy/status/boned.jpg”]
},
反馈2：{
用户名：“Chuck”，
状态：[“卡盘，测试”]，
图像：[“/images/profile/timmy/status/boned.jpg”]
}
}
;
函数buildFriendStatus（）{
$。每个（jsonData，函数（键，项）{
让clone=$（'.w3 container.w3-card-2.w3 white.w3 round.w3 margin'）.last（）.clone（）；
clone.find（'h4'）.html（item.username）；
//状态是一个数组
//如果您认为合适，请进行更改，我们只接受第一个元素。
clone.find（'p'）.html（item.status[0]）；
//此处有进一步的克隆更改
// …
//最后，将节点附加到DOM中
clone.removeClass（'hide-me'）.insertAfter（$injectAfter）；
});
}
//只是为了增强演示效果
倒计时（10000）；
setInterval（函数（）{
buildFriendStatus（）；
倒计时（空）；
}, 10000);
//助手
函数倒计时（x）{
x&&（countdown.v=（x/1000）+1，countdown.cd=countdown.v）；
x==null&&（countdown.cd=countdown.v）；
（countdown.cd-1>0）和&--countdown.cd；
document.querySelector（'#counter'）.textContent=`调用${countdown.cd}s`中的服务器；
countdown.cd&（clearTimeout（countdown.t）(
<!-- friends activity feed -->
<script type="text/javascript">
    buildSelfStatus();
    buildFriendStatus();
</script>

<!-- always have this first (sticky) for the user status -->
<div class="w3-container w3-card-2 w3-white w3-round w3-margin user-status">
    <h4></h4>

    <p></p>

    <div class="w3-row-padding" style="margin: 0 -16px;">
        <div class="w3-half">
            <img src="" style="width: 100%; height: 200px;" alt="<?php echo $this->identity() . "'s image"; ?>" class="w3-margin-bottom w3-round w3-border">
        </div>
    </div>
</div>

<!-- element I am cloning -->
<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
    <h4></h4>

    <p></p>

    <div class="w3-row-padding" style="margin: 0 -16px">
        <div class="w3-half">
            <img src="" style="width: 100%; height: 200px;" alt="<?php echo "Image"; ?>" class="w3-margin-bottom w3-round w3-border">
        </div>
    </div>

    <button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom">
        <i class="fa fa-thumbs-up"></i> Like
    </button>
    <button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom">
        <i class="fa fa-comment"></i> Comment
    </button>
</div>

{
  "feed": {
    "username": "Timmy",
    "status": ["this is jimmy, test"],
    "images": ["\/images\/profile\/timmy\/status\/boned.jpg"]
  }
}

var clone = $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin').clone();

var clone = $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin').last().clone();