javascript - 使用字母选择对 Div 内容进行排序

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. 需要删除名称文本中的空格
3. if() 需要比较员工姓名文本，而不是 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);
        }
    });
});

DEMO