Question

此功能目前通过<li>元素内的文本过滤<li>个元素。如何修改它以便它也会按<li>标记内的文字（例如数据属性）＆gt;进行过滤。

我已尝试将($(this).text().search(...))更改为($(this).search(...))，但这只会阻止该功能完全正常工作。

我在这里发布了一个工作示例的小提琴：http://jsfiddle.net/chayacooper/sMEbN/

$(document).ready(function () {
    $('#list li').addClass('visible');
    $('#search').show();    
    $('#filter').keyup(function(event) {
    if (event.keyCode == 27 || $(this).val() == '') {
            $(this).val('');    
            $('#list li').removeClass('visible').show().addClass('visible');
    }         
        else {
            filter('#list li', $(this).val());
    }
    });
});

function filter(selector, query) {
  query = $.trim(query);
  query = query.replace(/ /gi, '|');   
  $(selector).each(function() {
    ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
  });
}

Answer 1

您可以尝试这样的事情：

$(selector).each(function () {
    var data = $.map($(this).data(), function (el) {
        return el;
    }).join(' ');
    ($(this).text() + ' ' + data).search(new RegExp(query, "i")) < 0 
        ? $(this).hide().removeClass('visible')
        : $(this).show().addClass('visible');
});

http://jsfiddle.net/sMEbN/5/

$(this).data()返回所有数据属性，然后可以将它们连接成字符串。

使用“搜索”方法按<li>和</li> <li>标记</li>中的文字进行过滤

1 个答案: