Question

我试图通过遍历DOM在UI中使用JavaScript来实现过滤机制，并找到搜索到的单词。这就是我的HTML和UI的样子。 enter image description here

所以我的想法是，一旦数据（动态）从后端（通过java）加载，我想在HTML中遍历他们搜索的特定关键字的DOM。这就是我在Jquery中编写JS的方法

$(document).ready(function() {
     jQuery('#txtSearch').keyup(function(event){
        if (event.keyCode == 27) {
            resetSearch();
        }

        if (jQuery('#txtSearch').val().length > 0) {
            jQuery('.list-group-item').hide();
            jQuery('.list-group-item span.assignee-style:Contains(\'' + jQuery('#txtSearch').val() + '\')').
            parent('li').parent('ul').parent('li').show();

        }

        if (jQuery('#txtSearch').val().length == 0) {
            resetSearch();
        }

    });      

    function resetSearch(){
        jQuery('#txtSearch').val('');
        jQuery('.list-group-item').show();
        jQuery('#txtSearch').focus();
    }



});

我期待的行为是当我搜索＆＃34; john＆＃34;我只想要包含＆＃34; John＆＃34;的数据（在所有3列中）出现。作为一个开始，我只是通过Assignee名称遍历DOM。但结果不是我想要的。我做错了什么？

Answer 1

.parent采用选择器，而不仅仅是标记名称，所以为什么不简化为：

$(document).ready(function() {
     jQuery('#txtSearch').keyup(function(event){
        var search = jQuery('#txtSearch').val();
        if (event.keyCode == 27) {
            resetSearch();
        }

        if (search.length > 0) {
            jQuery('.list-group-item').hide();
            jQuery('.list-group-item span.assignee-style:contains(\'' + search + '\')').
                parent('.list-group-item').show();
        }
        else {
            resetSearch();
        }

    });      

    function resetSearch(){
        jQuery('#txtSearch').val('');
        jQuery('.list-group-item').show();
        jQuery('#txtSearch').focus();
    }
});

Answer 2

与:contains()选择器匹配区分大小写。搜索“约翰”将找不到“约翰”。

搜索关键字的DOM遍历未按预期显示？

2 个答案: