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

问题描述

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

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

<div class="员工"><div class="员工图片"><img src="img/people/teachers/aiello.png" alt=""/>
<p><span class="bold">Mrs.爱洛</span><br/>分机13328<br/>房间 328/323<br/><a href="mailto:[e-mail]">[e-mail]</a></p>

以上是艾哈迈德先生的员工容器.每个老师在 HTML 中都有完全相同的结构.

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

我希望使用 JQuery 使用 display:none; 隐藏所有与搜索词不匹配的 staff-container.

我希望搜索只查找教师姓名.换句话说，只有 teacher</span> 在每个 staff-container 中应该被搜索.>

如果没有老师匹配搜索词，我希望显示所有老师.如果没有搜索到，我希望显示所有教师.

搜索 HTML:

<form class="form-search form-inline"><input type="text" class="input-medium search-query" placeholder="Search"><button type="submit" class="btn">搜索</button></表单>

这是一个非常简单的fiddle

查看网页 我正在添加搜索.它还没有搜索.

对不起，如果我问的问题太大了，我只是需要帮助，因为我从未在 jquery 中进行过搜索.

编辑以删除反对票

解决方案

检查 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();否则 $this.closest('div.staff-container').fadeIn();});});

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

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>

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.

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

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.

Search 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>

Here is a VERY simple fiddle

Check out the webpage I am adding the search to. It does not have the search on it yet.

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.

edited to remove downvote

解决方案

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屋！