3

さまざまなストア情報を含むテーブルセルを持つ行に各ストアを表示するストアディレクトリを開発しています。結果をフィルタリングするために、メンズファッション、ウィメンズファッションなどの店舗タイプのリストも基本的に用意しています。

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

フォーマット。

ユーザーがこれらのリストアイテムの1つ、たとえば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 に答える