javascript - 将主体从A-Z切换到阵列中的第一项

我有一个A-Z切换键。我正在从REST API生成按字母顺序排列的数据ul。当我单击A-Z切换键时，我希望正文滚动到与单击的A-Z切换键字符匹配的列表项的第一个匹配项。

我已经尝试了以下类似的方法：

HTML：

<a href="#">A</a>

<ul>
    <li id="Afoo">Afoo</li>
    <li id="Amoar">Amoar</li>
    <li id="Apoo">Apoo</li>
</ul>

JS：

foo = ['Afoo', 'Amoar', 'Apoo'];  // this is generated elsewhere in prod code

$('a').on('click', function () {
    var alpha = $(this).text();
    var res = [];

    for (var i=0, len=foo.length; i<len; i++) {
        if (foo[i].indexOf(alpha) === 0) {
            res.push(foo[i]);
            return res;
        }
    }

    $('body').animate({scrollTop: $("#" + res[0] + "").position().top + 24}, 650);
});

我认为问题出在我的return res;所在的位置以及可能是我如何调用$('#' +res[0]+ '')的原因，但是我不确定要开始对此进行故障排除。

这是jsfiddle

谢谢你的帮助

最佳答案

看来您的问题与您在for循环内所做的事情有关。

这是一个有效的小提琴：http://jsfiddle.net/7w6yujaw/1/

只需替换“ return res”即可；带有“ break”

var foo = ['Afoo', 'amoar', 'apoo'];

$('a').on('click', function () {

    var alpha = $(this).text();
    var res = [];

    for (var i=0, len=foo.length; i<len; i++) {

        if (foo[i].indexOf(alpha) === 0) {
            res.push(foo[i]);
            break;
        }
    }

    $('body').animate({scrollTop: $("#" + res[0] + "").position().top + 24}, 650);
});

您也可以这样做：

var foo = ['Afoo', 'amoar', 'apoo'];

$('a').on('click', function () {

    var alpha = $(this).text();

    for (var i=0, len=foo.length; i<len; i++) {

        if (foo[i].indexOf(alpha) === 0) {

            $('body').animate({scrollTop: $("#" + foo[i] + "").position().top + 24}, 650);

            break;

        }
    }

});

关于javascript - 将主体从A-Z切换到阵列中的第一项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27713302/