jquery从列表1中删除不在列表2中的项目答案

【问题标题】：jquery Remove items from list 1 not in list 2jquery从列表1中删除不在列表2中的项目
【发布时间】：2012-12-29 00:41:50
【问题描述】：

我有一个看似很简单的问题，但是我的带宽现在这么有限，搜索了SO却发现a relevant question只适用于C#，我的意思是还没有运气。

HTML：

<ul class="first">
  <li data-id="1">One</li>
  <li data-id="2">Two</li>
  <li data-id="3">Thre</li>
  <li data-id="4">Four</li>
  <li data-id="5">Five</li>
  <li data-id="6">Six</li>
</ul>
<ul class="second">
  <li data-id="1">One</li>
  <li data-id="2">Two</li>
  <li data-id="3">Thre</li>
  <li data-id="4">Four</li>
</ul>

我想从第一个中删除最后两个项目（因此是五个和六个），因为它们在第二个中不存在。顺序实际上并不重要。简化我的问题的示例。基本上没有明确的想法来实现这一点，抱歉，所以每当我尝试使用 .length 检查时，我都会删除所有第一个项目。

非常感谢任何提示。谢谢

更新：对不起这是我的错。 “顺序实际上并不重要”：我的意思是列表可能是无序的，例如：

<ul class="second">
  <li data-id="3">Thre</li>
  <li data-id="1">One</li>      
  <li data-id="4">Four</li>
  <li data-id="2">Two</li>
</ul>

同样适用于第一个。

【问题讨论】：

标签： jquery

【解决方案1】：

如果您通过data-id 属性评估等效性：

$('.first li').filter(
    function(){
        return !$('.second li[data-id="' + $(this).data('id') + '"]').length;
    }).remove();

JS Fiddle demo.

参考资料：

data()。
filter()。

【讨论】：

非常感谢。我知道我应该问，但我一直在寻找
为什么要过滤所有<li />s？不应该是$('.first li')吗？
@lnrbob：是的，它应该。最初我打算过滤两个列表以进行仔细检查，然后，当我编写 filter() 函数时，我意识到这是毫无意义的重复。但我忘了修改选择器...已编辑，感谢您的关注！ =)
@DavidThomas 不用担心！ :)

【解决方案2】：

$('ul.first li:gt(3)').remove();

或者：

var $first = $('.first li'), $second = $('.second li');

$first.filter(function(){
    return !$second.filter('[data-id='+ this.dataset.id +']').length
}).remove();

【讨论】：

抱歉，不能申请大于更复杂的ID，可以吗？
@swan 是否要删除基于data-id 属性的元素？
是的，但数据 ID 并不总是整数，我的意思是可以是 data-id="new-1"。不仅是整数。对不起，不清楚的问题。上面说的不是那么清楚：“简化我的问题的样本”。

【解决方案3】：

试试这个

var set1 = $('.first').children(),
    set2 = $('.second').children();

set1.filter(function() {
    var testingId = $(this).data('id'),
        found = set2.filter(function() {
            return $(this).data('id') === testingId;
        });

    return found.length === 0;
}).remove();

演示地址 http://jsfiddle.net/gaby/Ehewz/

【讨论】：

【解决方案4】：

// start by building a list of elements in list two.
var list2 = {};
$('.second li').each(function(){
    // by data id.
    list2[$(this).attr('data-id')] = true;
    // by text
    // list2[$(this).text()] = true;
});
// Then remove any values from the first list where it's data-id isn't in our list.
$('.first li').each(function(){
    // Make replacement here to match text.
    if( ! list2[ $(this).attr('data-id') ] ){
    // if( ! list2[ $(this).text() ] ){
        $(this).remove();
    }
});

【讨论】：