3

我正在开发一个商店目录，它在一行中显示每个商店，其中包含带有各种商店信息的表格单元格。为了帮助过滤结果，我还有一个基本的商店类型列表，例如男士时装、女士时装等

<li>--Store Type--</li>

格式。

当用户单击这些列表项之一时，例如 Men's Fashion，我希望它过滤包含术语 Men's Fashion 的所有表格行，并隐藏没有该术语的行。一些表格单元格将有多个术语，因为一些商店同时销售男士和女士时装，所以我希望它根据所有术语而不是单个术语进行过滤。

我将如何使用 jQuery 来做这件事？

这是我的列表结构

<ul>
   <li>Women's Fashion</li>
   <li>Men's Fashion</li>
   <li>Shoes &amp; Footwear</li>
   <li>Communication &amp; Technology</li>
</ul>

这是我的表结构

<tr class="row" data="">
   <td class="name list-background-dark">Ted Baker<img class="store-logo" src="Logo.jpg" alt="Ted Baker" title="Ted Baker"></td>
   <td class="location list-background-dark"><span class="location-image-dark">Level 1</span></td>
   <td class="numeric number"><span class="telephone-dark">5555555</span></td>
   <td class="category"><span class="category-dark">Men's Fashion, Women's Fashion, Communication &amp; Technology</span></td>
</tr>

任何帮助将不胜感激。

4

1 回答 1

3

更新：我以前的答案使用过$.grep，但更好的选择是filter：

$(".row").hide().filter(function() {
    return $(this).find(".category span").text().indexOf(searchTerm) >= 0;
}).show();

jsFiddle的工作示例。

细节：

这将选择所有行，隐藏它们，并返回相同的数组

$(".row").hide()

...然后将被传递给filter（它将通过某些条件过滤它）。

$(".row").hide().filter(function() {
    // "this" refers to the element being tested
    return ...
});

我们想要的是具有category类元素的行，并且在其内部span应该有我们正在寻找的文本：

$(this).find(".category span").text().indexOf(searchTerm) >= 0

最后，显示了结果元素：

}).show();
于 2013-02-15T01:51:53.527 回答