Javascript 如何使用jQuery使用多个数据属性和多个逻辑条件选择li

我有一个要在客户端筛选的产品列表。productlist是具有多个li的ul，如下所示：

<li data-property="2,3,4" data-format="1,2,3,4,5" data-location="1,2,4" data-id="9">
                        Product A is fantastic 
</li>

产品A太棒了

使用jQuery如何选择具有以下特性的li，例如： （数据位置中的值2或4）和（数据属性中的值3或4）以及（数据位置中的值1或2或3）。

您可以使用

li

元素创建各种

数据-*

属性的值数组。然后，您可以使用测试这些数组中是否存在各种值：

$("li").filter(function() {
    var li = $(this),
        property = li.data("property").split(","),
        format = li.data("format").split(","),
        location = li.data("location").split(",");
    return (property.indexOf("2") > -1 || property.indexOf("4") > -1) && (format.indexOf("4") > -1 || format.indexOf("5") > -1);
});

上述示例将返回所有

li

元素，在

数据属性中值为2或4，在
数据格式中值为4或5。您可以根据需要添加任意数量的条件，只需确保使用括号将它们正确分组。
您可以使用
li
元素并使用创建各种
数据-*
属性值的数组。然后，您可以使用测试这些数组中是否存在各种值：

$("li").filter(function() {
    var li = $(this),
        property = li.data("property").split(","),
        format = li.data("format").split(","),
        location = li.data("location").split(",");
    return (property.indexOf("2") > -1 || property.indexOf("4") > -1) && (format.indexOf("4") > -1 || format.indexOf("5") > -1);
});

上述示例将返回所有
li
元素，在
数据属性中值为2或4，在
数据格式中值为4或5。您可以根据需要添加任意数量的条件，只需确保使用括号正确分组即可。
您可以创建自定义表达式：

$.expr[':'].myProductFiltered = function(obj){
  var $obj = $(obj),
      d_p = $obj.data('property').split(','),
      d_f = $obj.data('format').split(','),
      d_l = $obj.data('location').split(',');

  return ($.inArray("3", d_p) > -1 || $.inArray("4", d_p) > -1) /* values admitted in data-property */
      && ($.inArray("2", d_l) > -1 || $.inArray("4", d_l) > -1) /* values admitted in data-location */
      && ($.inArray("3", d_f) > -1 || $.inArray("4", d_f) > -1) /* values admitted in data-format */
      /* add as many filters you need */
};

并用

$('li:myProductFiltered')

查看实时小提琴：
您可以创建自定义表达式：

$.expr[':'].myProductFiltered = function(obj){
  var $obj = $(obj),
      d_p = $obj.data('property').split(','),
      d_f = $obj.data('format').split(','),
      d_l = $obj.data('location').split(',');

  return ($.inArray("3", d_p) > -1 || $.inArray("4", d_p) > -1) /* values admitted in data-property */
      && ($.inArray("2", d_l) > -1 || $.inArray("4", d_l) > -1) /* values admitted in data-location */
      && ($.inArray("3", d_f) > -1 || $.inArray("4", d_f) > -1) /* values admitted in data-format */
      /* add as many filters you need */
};

并用

$('li:myProductFiltered')

看现场小提琴：
你能试试这个吗

你能试试这个吗

如果这将使解决方案更容易，则数据属性可以使用空格分隔符而不是逗号分隔符。如果这将使解决方案更容易，则数据属性可以使用空格分隔符而不是逗号分隔符。这不起作用。使用
时，产品A非常出色>产品B非常棒
因为返回了输入产品B，所以我使用了这个条件数组var conditions={‘数据格式’：['4'，'1']，‘数据位置’：['5'，'2']}，并且只选择了A。请检查控制台。检查这把小提琴，这不起作用。使用
时，产品A非常出色>产品B非常棒
因为返回了输入产品B，所以我使用了这个条件数组var conditions={‘数据格式’：['4'，'1']，‘数据位置’：['5'，'2']}，并且只选择了A。请检查控制台。检查这把小提琴