除了我搜索的div之外,JQuery隐藏所有div

Question

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

以上是一个包含很多教师的水平滚动条.滚动条中的每个教师都被包含在一个单独的div中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:asusan@wcskids.net">asusan@wcskids.net</a></p>
    </div>
</div>

以上是staff-container艾哈迈德先生.每位教师都有与HTML相同的结构.

当我在搜索中键入教师姓名并单击搜索按钮时,我希望发生以下情况.

我想通过使用JQuery staff-container来隐藏与搜索词不匹配的所有内容display:none;.

我希望搜索只查找教师姓名.换句话说,搜索中只应查找<span class="bold">teacher</span>每个中staff-container的内容.

如果没有教师匹配搜索词,我希望显示所有教师.如果没有搜索到任何内容,我希望显示所有教师.

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

这是一个非常简单的小提琴

查看我要添加搜索的网页.它还没有搜索它.

对不起,如果我问一个问题太大的悲伤面孔,我只需要帮助,因为我从来没有在jquery中搜索过.

编辑删除downvote

Answer 1

检查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();
    });
});