Как выбрать li с помощью jQuery, используя несколько атрибутов данных и несколько логических условий

Question

У меня есть список товаров, который я хотел бы отфильтровать на стороне клиента.Список продуктов - это ul с несколькими li, например:

<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>

Используя jQuery, как я могу выбрать li, которые имеют, например: (значение 2 OR 4 в местоположении данных) AND (значение 3 OR 4в свойстве data) И (значение 1 ИЛИ ИЛИ 3 в местоположении данных).

Answer 1

Вы можете создать собственное выражение:

$.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')

увидеть живую скрипку: http://jsfiddle.net/VgTnG/

Answer 2

Не могли бы вы попробовать это http://jsfiddle.net/sabri/gmt8m/

var conditions = {
    'data-format': ['4', '1'],
    'data-location': ['5', '2']

}

var result = $('li').filter(function(index) {
    var current_li = $(this);
    var and_cond = true;
    $.each(conditions, function(key, value) {
        var or_cond = false;
        $.each(value, function(skey, svalue) {
            or_cond = or_cond || (jQuery.inArray(svalue, current_li.attr(key).split(',')) != -1 )
        })
            and_cond = and_cond && or_cond;
    })
    if(and_cond )
       return current_li ;


})

console.log(result);

Answer 3

Вы можете filter элементы li и использовать split для создания массивов значений различных атрибутов data-*. Затем вы можете использовать indexOf для проверки наличия различных значений в этих массивах:

$("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 в data-property и значением 4 или 5 в data-format. Вы можете добавить столько условий, сколько вам нужно, просто убедитесь, что вы правильно сгруппировали их в скобках.