Question

我有一个名为$myList的无序列表。每次将一个字符串（$entry）输入到输入中时，我想要遍历列表以查看该字符串是否已经在列表中。如果是，我想删除包含匹配字符串的列表项。无论哪种方式，新字符串都会被添加并成为新的列表项。

这是我尝试的最新内容：

$myList.text().filter($entry).remove();


$myList.append($entry);

我并不喜欢我.text().filter()，但我尝过的其他任何事情都没有。

实现这一目标的简单方法是什么？

Answer 1

我使用了.each功能;它遍历选择器内的所有项目。我没有使用.filter，因为我虽然.each会提供更直观的编程体验，因为你们都想检查是否存在某些内容并将其删除（如果有）并将相同项添加到另一个清单。

＆＃13;

$myList = $("#myList");
$entry = $("#entry");
$newList = $("#newList");

$entry.on('input', function () {
  entryText = $entry.val();
  $myList.find("li").each(function () {
    if ($(this).html() == entryText) {
      $("<li>")
        .append($(this).html())
        .appendTo($newList);
      $(this).remove();
    }
  });  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Let's filter some tags<br />

<ul id="myList">
	<li>css</li>
	<li>js</li>
	<li>so</li>
	<li>sass</li>
	<li>haml</li>
</ul>

<input type="text" id="entry" />

<ul id="newList">
</ul>

＆＃13;

Answer 2

filter方法应该对列表项起作用，而不是text()值，因为它是您可能需要删除的列表项之一。 filter方法需要函数作为参数。该函数应确定迭代项的text()值是否为条目文本。然后remove将起作用：

$('li', $myList).filter(function () { 
    return $(this).text() == entry;
}).remove();

$('button').click(function () {
    var entry = $('input').val();
    var $myList = $('ul');
    $('li', $myList).filter(function () { 
        return $(this).text() == entry;
    }).remove();
    $('<li>').text(entry).appendTo($myList); // add item at end of list
    $('input').val(''); // clear input
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input><button>Add</button>
<ul></ul>

过滤数组以匹配文本（jQuery / Javascript）

3 个答案: