JQuery隐藏除了我搜索的div之外的所有div [英] JQuery hide all divs except for the divs I search for

问题描述

我想为用户创建一个搜索输入，以便为我的学校快速找到老师。

I want to create a search input for users to quickly find teachers for my school.

上面是一个水平滚动条，包含很多老师。滚动条中的每个老师都包裹在一个名为 staff-container 的单独div中。

The above is a horizontal scrollbar containing a lot of teachers. Every teacher in the scrollbar is wrapped in a seperate div called staff-container.

<div class="staff-container">
    <div class="staff">
        <div class="staff-picture">
            <img src="img/people/teachers/aiello.png" alt="" />
        </div>
        <p><span class="bold">Mrs. Aiello</span><br />
        Ext. 13328<br />
        Room 328/323<br />
        <a href="mailto:[e-mail]">[e-mail]</a></p>
    </div>
</div>

上面是 staff-container 艾哈迈德先生。每个教师在HTML中都有完全相同的结构。

The above is the staff-container for Mr. Ahmed. Every teacher has the same exact structure in HTML.

当我在搜索中输入教师的姓名并点击搜索按钮时，我想要发生以下情况。

When I type a teacher's name in the search and click the search button, I want the following to happen.

我想让所有与搜索项不匹配的 staff-container 隐藏 display：none; 使用JQuery。

I want all the staff-container's that don't match the search term to be hidden with display:none; by using JQuery.

我希望搜索只查找教师名称。换句话说，只有每个工作人员 - 集装箱< span class =bold> teacher< / span> c>应该通过搜索找到。

I want the search to only look for the teacher name. In other words, only the <span class="bold">teacher</span> in each staff-container should be looked for by the search.

如果没有教师匹配搜索项，我想要显示所有的教师。

If no teacher matches the search term, I want all the teachers to be displayed. If nothing is searched, I want all the teachers to be displayed.

搜索HTML：

<div class="search-container">
    <form class="form-search form-inline">
        <input type="text" class="input-medium search-query" placeholder="Search">
        <button type="submit" class="btn">Search</button>
    </form>
</div>

这里是一个非常简单的 fiddle

Here is a VERY simple fiddle

查看网页 我正在将搜索添加到。 尚未对其进行搜索。

对不起，如果我要求太大的问题伤心的脸，我只需要帮助，因为我从来没有在jquery中搜索。

I'm sorry if I'm asking too big of a question sad face, I just need help because I have never made a search in jquery.

编辑删除downvote

推荐答案

检查jsfiddle：

Check jsfiddle:

http://jsfiddle.net/XjgR2/

$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
    var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
    $('div.staff-container .bold').each(function(){
         var $this = $(this);
         if($this.text().toLowerCase().indexOf(query) === -1)
             $this.closest('div.staff-container').fadeOut();
        else $this.closest('div.staff-container').fadeIn();
    });
});

这篇关于JQuery隐藏除了我搜索的div之外的所有div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！