Javascript 使用字母选择对Divs内容进行排序

我有一个包含名字的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>

---

你有几个问题

你需要规范化案例。姓名以大写字母开头，列表字母不以大写字母开头

需要从名称文本中删除空白

if（）

需要比较staffname文本，而不是jQuery对象

---

---

也许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);
        }
    });
});

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);
        }
    });
});