jQuery：如何遍历一组元素，只找到与另一个数组中的值匹配的元素？

Question

我基本上有一个名为 findItem() 的小函数，它应该根据元素上的自定义 data- 属性来查找我正在寻找的元素。

在这种情况下，这些是纯粹的数字，例如。 data-slide=1.

对于如何将每个项目的数据幻灯片的值与另一个数组中包含的值匹配，我有点不知所措。

这是一个更具体的例子：

function findItem(count) {
    var collection = [];

    $.each(allMyLiItems, function(i, item) {

        if ( $(item).data('slide') == count ) { 
            collection.push(item);
        }

    });

    return $(collection);
}
findItem([1,3])

这不起作用，因为 if 语句中的 count 似乎没有匹配任何内容。

该页面确实包含 4 个<li data-slide="{number}">… 元素，因此 1,3 应该返回这些元素的第一个和第三个。

我在这里做错了什么？

Answer 1

使用jQuery.grep 和jQuery.inArray：

function findItem(items) {
    return jQuery.grep($('li'), function(element, index) { 
       return jQuery.inArray($(element).data('slide'), items) != -1;
    });
}

Working example

Answer 2

要解决 if 语句中的 count 不匹配任何内容的问题，请尝试以下操作：

function findItem(count) {
    var collection = [],
             count = count;

    $.each(allMyLiItems, function(i, item) {

        if ( $(item).data('slide') == count ) { 
            collection.push(item);
        }

    });

    return $(collection);
}
findItem([1,3])

这将创建一个闭包，以便each 中的匿名函数能够看到它。

您的第二个问题是您将count 作为数组传递。所以if 条件需要一点修正：

function findItem(count) {
    var collection = [],
             count = count;

    $.each(allMyLiItems, function(i, item) {

        if ( count.indexOf($(item).data('slide')) !== -1 ) { 
            collection.push(item);
        }

    });

    return $(collection);
}
findItem([1,3])