jqueryの - クリックされたフィルタオプションとコンテナ要素が

Question

UPDATE 2値からマッチした値に基づいてフィルタエレメント：すべてのあなたの助けを

本当にありがとうございました。 3つのソリューションはすべて機能していましたが、読みやすさとパフォーマンスの点でBillが好きです。いつものように、私は専門知識のレベルに驚き、ここで助けます。本当に助けに感謝します。

UPDATE：

jsfiddleにデモアップ置く：http://jsfiddle.net/FC4QE/17/

私はフィルタを作成する必要があります。ユーザーがブランド名のリンクをクリックすると、一致するものがあれば、他の商品を除外する必要があります。ブランドは商品名に含まれていますので、私はマッチを探していますが、1つまたは多くがある場合は、他の商品を隠す必要があります。

I持って、次のjavascipt/jqueryのコード：

$(function(){ 
    $('#filter-by-brand li a').click(function(){ 
     // get html string of clicked item 
     var brandNameSelected = $(this).html(); 
     var productContainer = $('#product-collection div.productBoxWrapper'); 

     // reset products in the view 
     if (brandNameSelected == 'All Brands'){ 
      productContainer.fadeIn("slow"); 
     } 
     // for each product title (a tag) 
     $("#product-collection h4 a").each(function(){ 
      var productTitle = jQuery(this).html(); 

      // if item clicked is contained inside product title, hide all 
      // products and only show the ones where the title matched 
      if(productTitle.indexOf(brandNameSelected) != -1){ 
       // hide container of all products, this hides all products 
       productContainer.fadeOut("slow"); 
       // then show only ones that match. the problem is that only the one product is 
       // displayed since we're inside the .each. How can I show all products where product title contains the item clicked? 
       $(this).parent().parent().parent().parent().fadeIn("slow"); 
      } 
     }); 
    }); 
}); 

私はコード内のコメントですべてを説明したが、コードは動作しますが、私はアイテムがクリックされた製品を示していますので、基本的には、含まれています.eachメソッドの中には、最後に一致した項目だけが表示されます。どのようにして一致したものをそれぞれの中に表示することができますか？これは不可能ですし、別の方法がありますか？

これは意味があり、誰かがアドバイスを持っていることを期待しています。おかげさまで

Answer 1

further update to fiddleは、私が得た最も素晴らしい探しを参照してください。この結果は

$('#filter-by-brand li a').click(function() 
{ 
    var brandNameSelected = $(this).html(); 
    var productContainer = $('#product-collection .product-container'); 

    if (brandNameSelected == 'All Brands') 
    { 
     productContainer.fadeIn("slow"); 
    } 
    else { 
     $(".product-container") 
      .fadeOut(100) 
      .delay(100) 
      .filter(function() { 
       return $(this).html().indexOf(brandNameSelected) > -1; 
      }) 
      .each(function(index, item) { 
       $(item).fadeIn("slow"); 
      }); 


    } 
}); 

http://jsfiddle.net/tu8tc/1/で再生できます。

Answer 2

フィルタリングしたい商品を単に隠さないのはなぜですか？

if(productTitle.indexOf(brandNameSelected) == -1) 
{ 
    $(this).parent().parent().parent().fadeOut("slow"); 
} 

http://jsfiddle.net/2Sduq/1/を参照してください。

Answer 3

"すべてのブランド"については、救済。特定のブランド名については、すべてのproductContainerを無条件に非表示にし、その条件を満たすものを選択的にフェードインします。

$(function() { 
    $('#filter-by-brand li a').click(function() { 
     var brandNameSelected = $(this).html(); 
     var productContainer = $('#product-collection .product-container'); 
     if (brandNameSelected == 'All Brands') { 
      productContainer.fadeIn("slow"); 
      return; 
     } 
     productContainer.hide(); 
     $("#product-collection h4 a").each(function() { 
      var productTitle = $(this).html(); 
      if(productTitle.indexOf(brandNameSelected) != -1) { 
       $(this).closest(".product-container").stop().fadeIn("slow"); 
      } 
     }); 
    }); 
}); 

jQueryの.closest()は醜い.parent().parent().parent()を回避する方法update of your fiddle

注を参照してください。

.stop()は、fadeout()が既に要素で実行されている場合にのみ、予防的です。これがproductContainersをアニメーション化する唯一のコードである場合は必要ありません。

EDIT ...

または（可読性が苦しんでいるが）あなたは1つのステートメントでほとんどすべてを行うことができますjQueryの.filterを慎重に使用すると、簡潔で、より効率的にする：

$(function() { 
    $('#filter-by-brand li a').click(function() { 
     var brandNameSelected = $(this).html(); 
     $('#product-collection').find('.product-container').hide().end().find('h4 a').filter(function() { 
      return (brandNameSelected == 'All Brands') || ($(this).html().indexOf(brandNameSelected) != -1); 
     }).closest(".product-container").stop().fadeIn("slow"); 
    }); 
}); 

が