div内容的Javascript搜索表单[关闭]答案

【问题标题】：Javascript search form on div contents [closed]div内容的Javascript搜索表单[关闭]
【发布时间】：2016-03-05 20:55:08
【问题描述】：

所以我有一个“表单搜索”功能脚本，我试图将其应用于容器中的项目。我从tutorial online 中找到了这个，有人用来搜索教职员工。只有我希望将此应用于我的 div 类：

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

这是 jsfiddle - 我试图使用 JS 和类来提取图像和文本，但它不起作用：

http://jsfiddle.net/lmac1/x6kv91qk/

谁能指出我正确的方向？我正在使用这个JQuery hide all divs except for the divs I search for

【问题讨论】：

请将代码上传到jsfiddle.net
瑞恩你能看一下吗？
如果您将相关的HTML和JS代码上传到jsfiddle.net，我们将能够查看您的问题并帮助您找到解决方案
没问题 Ryan - 我会这样做的，我只是通过社交媒体给你发了消息，因为我在你的个人资料上看到了你的推特 - 如果 js fiddle 是最方便的，那就太好了。当我发布它时，我只是把链接放在这里吗？
嗨 Ryan - 小提琴上有一些代码 jsfiddle.net/lmac1/x6kv91qk 目前 CSS 是网页的基础 - 我将把它用作使用 json 的购物车 - 只是添加一些功能对于初学者

标签： javascript jquery twitter-bootstrap

【解决方案1】：

问题是您的<div class="dress-container"> 目前正在包装您的所有产品，因此一旦您使用搜索栏，您就会继续隐藏所有产品。

我在此处修复了您的 html 标记并删除了 <div class="row">，因此当您过滤它们时它们可以很好地排列： http://jsfiddle.net/j7c4kdy3/3/

【讨论】：

Brilliant Ryan 完美运行！谢谢你看这个，很大的帮助，大拇指！