jQuery - using：ネストされたdiv /クラスを含む即時検索のためのcontains？

Question

私は検索ボックスを持っています。私は繰り返しdivをフィルタリングするためにjQueryとkeyupを使用しています。

各div要素は次のようになります。

<div class="searchCell" id="searchCell' . $id . '">'; 
    <div class="friendName"> 
     // someNameOutputWithPHP. 
     </div> 
</div> 

を今、私は名前のテキストに基づいてフィルタリングします。 someNameOutputWithPHPに検索クエリが含まれている場合、searchCell全体が表示されます（）。そうでない場合は、searchCell全体をhide（）する必要があります。

これは、しかし、動作しません：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#searchbox").keyup(function() { 
     var searchValue = $(this).val(); 
     if(searchValue === "") { 
      $(".searchCell").show(); 
      return; 
     } 
     $(".searchCell").hide(); 
     $(".searchCell > .friendName:contains(" + searchValue + ")").show(); 
    }); 
}); 
</script> 

---

---

EDIT

新しい問題を：私は私が望むどのように表示するdiv要素のショーを（）です。しかし：containsは正しく動作していません。

たとえば、名前の1つがRyanです。私が「Ryan」を検索すると、何も得られません。しかし、私は 'ヤン'を検索するときに私はライアンのdivを取得します。

何が問題なのですか。

がここにあります：

 $(".friendName:contains(" + searchValue + ")").parent().show(); 

Answer 1

あなたが.searchCellを隠し、その後、しかし親が隠されているので、表示プロパティが表示されません取得し、その子.friendName divを、示しているためである：コードが含まれています。

はこれを試してみてください：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#searchbox").keyup(function() { 
     var searchValue = $(this).val(); 
     if(searchValue === "") { 
      $(".searchCell").show(); 
      return; 
     } 
     $(".searchCell").hide(); 
     //$(".searchCell:has(.friendName:contains(" + searchValue + "))").show(); 
     // OR 
     //$(".friendName:contains(" + searchValue + ")").parents(".searchCell").show(); 
     // OR 
      $(".friendName:contains(" + searchValue + ")").parent().show(); // If .searchCell is always a direct parent 
    }); 
}); 
</script> 

Answer 2

あなたのセレクタ

$(".searchCell > .friendName:contains(" + searchValue + ")") 

がsearchValueからテキストを含むすべての.friendName divを選択します。それはうまく動作しますが、親要素である.show()が必要です。

$(".searchCell > .friendName:contains(" + searchValue + ")").parent().show(); 

デモ：http://jsfiddle.net/d3ays/3/

ところで、あなたのHTMLマークアップがあまりにも台無しに見えるだけで、そのための.parent()メソッドを呼び出します。たとえば、div.searchCellの背後には;があります。