Question

我有一个搜索框。我正在使用jQuery和keyup来过滤重复的div。

每个div看起来像这样：

<div class="searchCell" id="searchCell' . $id . '">';
    <div class="friendName">
        // someNameOutputWithPHP.
        </div>
</div>

现在，我想根据名称文字进行过滤。如果someNameOutputWithPHP包含搜索查询，则整个searchCell应显示（）。如果没有，整个searchCell应该隐藏（）。

但这不起作用：

<script type="text/javascript">
$(document).ready(function() {
    $("#searchbox").keyup(function() {
        var searchValue = $(this).val();
        if(searchValue === "") {
            $(".searchCell").show();
            return;
        }
        $(".searchCell").hide();
        $(".searchCell > .friendName:contains(" + searchValue + ")").show();
    }); 
}); 
</script>

修改

新问题：我得到了divs show（）来展示我的想法。但是：包含不正常。

例如：说其中一个名字是Ryan。当我搜索'Ryan'时，我什么都没得到。但是当我搜索'yan'时，我得到了Ryan div。

怎么了？

这是：包含代码：

        $(".friendName:contains(" + searchValue + ")").parent().show();

Answer 1

这是因为你隐藏了.searchCell，然后显示了它们的子.friendName divs，虽然得到显示属性但不会显示，因为父隐藏了。

试试这个：

<script type="text/javascript">
$(document).ready(function() {
    $("#searchbox").keyup(function() {
        var searchValue = $(this).val();
        if(searchValue === "") {
            $(".searchCell").show();
            return;
        }
        $(".searchCell").hide();
        //$(".searchCell:has(.friendName:contains(" + searchValue + "))").show();
        // OR
         //$(".friendName:contains(" + searchValue + ")").parents(".searchCell").show();
        // OR
          $(".friendName:contains(" + searchValue + ")").parent().show(); // If .searchCell is always a direct parent
    }); 
}); 
</script>

Answer 2

您的选择器

$(".searchCell > .friendName:contains(" + searchValue + ")")

将选择包含.friendName文字的所有searchValue div。这很好，但你需要.show()父元素。只需调用.parent()方法：

    $(".searchCell > .friendName:contains(" + searchValue + ")").parent().show();

演示：http://jsfiddle.net/d3ays/3/

顺便说一句，HTML标记看起来也搞砸了。例如，;背后有div.searchCell。

jQuery - 使用：包含用于嵌套div /类的即时搜索？

2 个答案: