Jquery DOM .each 和 .remove() 问题答案

【问题标题】：Jquery DOM .each and .remove() issueJquery DOM .each 和 .remove() 问题
【发布时间】：2014-04-15 11:00:22
【问题描述】：

基本上我的问题如下：

我有 N 格。
使用 .each() 函数我在这些 div 上设置了一个 setInterval() 函数（例如：更改 html 内容）。
使用按钮（每个 div 一个按钮）我可以删除 div。

问题：例如，如果 div 为 5，我使用 jquery 命令删除其中一个：.remove() .each() 保持迭代为 5 格。

我该如何解决？谢谢。小提琴：http://jsfiddle.net/Alberto_Ar3s/Yr8UP/

对于讨厌小提琴的人...

html

<div id='a1' class='clue'>a1
    <input type='button' class='remove' value='del' data-id='a1'>
</div>
<div id='a2' class='clue'>a2
    <input type='button' class='remove' value='del' data-id='a2'>
</div>
<div id='a3' class='clue'>a3
    <input type='button' class='remove' value='del' data-id='a3'>
</div>
<div id='a4' class='clue'>a4
    <input type='button' class='remove' value='del' data-id='a4'>
</div>
<div id='a5' class='clue'>a5
    <input type='button' class='remove' value='del' data-id='a5'>
</div>

var $j = jQuery.noConflict();

$j(function () {

    $j('.clue').each(function () {
        var id = $j(this).attr('id');
        setInterval(function () {
            console.log('id: ' + id);
        }, 1000);
    });

    $j('.remove').click(function (e) {
        e.preventDefault();
        var dtd = $j(this).attr('data-id');
        $j('#' + dtd).remove();
        return false;
    });

});

【问题讨论】：

也许只是在间隔回调函数中设置每个循环

标签： javascript jquery html each

【解决方案1】：

.each() 不会继续迭代，它是每秒记录一次的 setInterval。您需要清除间隔或使用 setInterval 包装每个间隔。

setInterval(function () {
    $j('.clue').each(function () {
        var id = $j(this).attr('id');// or use this.id
        console.log('id: ' + id);
    });
}, 1000);

DEMO

编辑： 也作为@A。 Wolff 在 cmets 中指出，这将避免设置多个无用的间隔，只使用一个

【讨论】：

+1 顺便说一句，这将避免设置多个无用的间隔，只使用一个
知道了！谢谢，对 n00b 问题表示抱歉：v

【解决方案2】：

.每个

只执行一次。问题是，你为五个 div 中的每一个开始间隔，如果你不停止它们，它就会永远执行。您需要停止已删除 div 的间隔。

【讨论】：