Divsの内容をレター選択で並べ替える

Question

名前を含むdivのリストがあります。私は名前に基づいて、ユーザーが選択した文字に基づいてdivをソートしたいと思います。たとえば、ユーザーが文字「d」を選択した場合、文字「d」で始まる名前を含むすべてのdivが表示され、他のすべてのdivが非表示になります。

今すぐ手紙を選択すると、divは表示されません。ここで

は私のhtmlです：ここでは

<div class="alphabetical-search"> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
     <li>d</li> 
     <li>e</li> 
    </ul> 
</div> 

<div id="staff-directory-wrapper"> 
    <div class="single-staff"> 
     <div class="name"> 
      Mark 
     </div> 
     <div class="position"> 
      position 
     </div> 
    </div> 

    <div class="single-staff"> 
     <div class="name"> 
      Sam bob 
     </div> 
     <div class="position"> 
      position 
     </div> 
    </div> 

    <div class="single-staff"> 
     <div class="name"> 
      Charles mark 
     </div> 
     <div class="position"> 
      position 
     </div> 
    </div> 

    <div class="single-staff"> 
     <div class="name"> 
      Rick sam 
     </div> 
     <div class="position"> 
      position 
     </div> 
    </div> 

    <div class="single-staff"> 
     <div class="name"> 
      Joe frank 
     </div> 
     <div class="position"> 
      position 
     </div> 
    </div> 

    <div class="single-staff"> 
     <div class="name"> 
      Bob mark 
     </div> 
     <div class="position"> 
      position 
     </div> 
    </div> 
</div> 

は私のjQueryのです：

var alphabets = $('.alphabetical-search ul > li'); 
var singleStff = $('#staff-directory-wrapper .single-staff'); 

alphabets.click(function() { 
    var letter = $(this), text = $(this).text(), count = 0; 

    alphabets.removeClass("active"); 
    letter.addClass("active"); 

    singleStff.hide(); 
    singleStff.each(function (i) { 
     var staffName = $(this).find('.name').text(); 
     if (text == $(staffName.charAt(0))) { 
      count += 1; 
      $(this).fadeIn(400); 
     } 
    }); 
}); 

Answer 1

あなたはケースを正規化する必要があるいくつかの問題

1. を持っています。名前は大文字で始まり、リストの文字が
2. はstaffnameテキストではなく、jQueryオブジェクト

---

alphabets.click(function() { 
    var letter = $(this), text = $(this).text().toLowerCase(), count = 0; 

    alphabets.removeClass("active"); 
    letter.addClass("active"); 

    singleStff.hide(); 
    singleStff.each(function (i) { 
     var staffName = $(this).find('.name').text().trim().toLowerCase(); 

     if (text == staffName.charAt(0)) { 
      count += 1; 
      $(this).fadeIn(400); 
     } 
    }); 
}); 

を比較するために、名前のテキストから

if()ニーズに空白をトリムする必要はありません。 DEMO