Question

我有以下列表

<ul id="serial_list" class="list-group scroll">
    <li class="list-group-item template">template</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
    <li class="list-group-item">eee</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
</ul>

我想根据数组的每个元素删除每个项目。

Approach1：

numbers = ["SNID", "abc", "eee", "SNID", "abc"];
// find each li
var list = $(serial_list).find('li:not(.template)');

numbers.forEach(function(number) {
    $(list).each(function(index, item) {
        // console.log(number);
        if (number == $(item).html()) {
            $(item).remove();
            return false;
        }
    });
});

预期结果将是

<ul id="serial_list" class="list-group scroll">
    <li class="list-group-item template">template</li>
</ul>

然而，实际结果是

<ul id="serial_list" class="list-group scroll">
    <li class="list-group-item template">template</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
</ul>

调用remove（）的次数与数组的长度相同。

但是，如果我在循环每个数字时更新列表（Approach2），结果就是我所期望的。

Approach2：

numbers = ["SNID", "abc", "eee", "SNID", "abc"];
var list;

numbers.forEach(function(number) {
    list = $(serial_list).find('li:not(.template)');
    $(list).each(function(index, item) {
        // console.log(number);
        if (number == $(item).html()) {
            $(item).remove();
            return false;
        }
    });
});

结果是预期的，但这会影响性能。

为什么方法1不起作用？

我对删除return false感到好奇，因为如果列表没有重复项，则approach1将起作用。

<ul id="serial_list" class="list-group scroll">
    <li class="list-group-item template">template</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
    <li class="list-group-item">eee</li>
    <li class="list-group-item">fff</li>
    <li class="list-group-item">ggg</li>
</ul>

Approach1：

numbers = ["SNID", "abc", "eee", "fff", "ggg"];
// find each li
var list = $(serial_list).find('li:not(.template)');

numbers.forEach(function(number) {
    $(list).each(function(index, item) {
        // console.log(number);
        if (number == $(item).html()) {
            $(item).remove();
            return false;
        }
    });
});

在这种情况下，approach1将按预期工作。为什么return false在这种情况下不会搞乱？

谢谢！

Answer 1

return false打破了每个循环迭代。

价：

我们可以在特定的迭代中打破$ .each（）循环回调函数返回false。返回非假是与a相同在for循环中继续声明;它将立即跳到下一个迭代。

删除它并且可以正常工作。

代码：

numbers.forEach(function (number) {
    $(list).each(function (index, item) {
        if (number == $(item).html()) {
            $(item).remove();
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/zurkd3hq/

Answer 2

由于您正在使用$(item).remove();，因此需要在下一次迭代中再次更新引用，因此方法1不起作用

您可以将filter()与indexOf

一起使用

var list = $(serial_list).find('li:not(.template)');    
list.filter(function(){
    return numbers.indexOf($(item).html()) > -1;
    //return $.inArray(numbers, $(item).html());
}).remove();

Answer 3

不能这样做：


    $info = stream_get_meta_data($fp);
    if ($info['timed_out']) {
        fclose($fp);
        $fp = connect();
    }

而不是在数组中循环。

Answer 4

从方法1中删除if ($(".LeftSide").hasClass("Toggled"))，它会根据需要输出。

Answer 5

<强> HTML

<ul id="serial_list" class="list-group scroll">
    <li class="list-group-item template">template</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
    <li class="list-group-item">eee</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
</ul>

<强>的JavaScript

var numbers = ["SNID", "abc", "eee", "SNID", "abc"];
// find each li
var list = $('#serial_list').find('li:not(.template)');

list.each(function(index, elem) {
    if (numbers.indexOf($(this).text()) != -1) {
        $(this).remove();
    }
});

现场演示： http://jsfiddle.net/52Lckqob/

Answer 6

var numbers = ["SNID", "abc", "eee", "SNID", "abc"];
var $list = $('#serial_list').find('li:not(.template)');

$list.filter(function(){
  return (numbers.indexOf(this.innerHTML) > -1);
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="serial_list" class="list-group scroll">
    <li class="list-group-item template">template</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
    <li class="list-group-item">eee</li>
    <li class="list-group-item">SNID</li>
    <li class="list-group-item">abc</li>
</ul>

jquery remove（）不起作用

6 个答案: