将所选类别循环到ul>李用加载更多按钮

这本应该很简单，但到处都会发生意想不到的行为！

我有一个如下结构的列表

HTML

<ul class = "question-list">
    <li class="question"> something </li> 
    <li class="question"> something </li>
    <li class="question"> something </li>
    <li class="question"> something </li>
    <li class="question"> something </li> //Shouldn't this be li:last-child?
    <a class="load-more" href="#">Load More</a>
</ul>

默认情况下，该列表显示5篇文章，然后在单击a.load-more时再加载5篇，直到加载完所有文章。加载完所有帖子后，a.load-more将消失。这就是默认情况下DOM的呈现方式。

JS

Template.foo.onRendered( function() {
$(document).keydown(function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 74) { //Keydown J
        var listItem = $('ul.question-list > li.question');
        var listItemFirst = $('ul.question-list > li.question:first-child');
        var selectedChild =  $('ul.question-list > li.question.selected-child');
        if($('input').is(":focus")|| $('textarea').is(":focus")){
            return null; //Do not activate when input or textarea is focused
        } else {
            e.preventDefault();
            if(! $(listItem).hasClass('selected-child')){
                $(listItemFirst).addClass('selected-child'); //select first child if ul > li has no selected item
            } else
            if( $(listItemFirst).hasClass('selected-child')) {
                $(listItemFirst).removeClass('selected-child');
                $('ul.question-list > li.question:last-child').addClass('selected-child'); //if first child is selected, select last child
            } else { 
                selectedChild.removeClass('selected-child');
                selectedChild.prev().addClass('selected-child');  // if above all is not the case, select previous li
            }
        }
    }
});
});

JS按照自己的评论行事。

现在，这应该可以正常工作，但我遇到了以下问题。

• 当导航离开和返回时，李的选择顺序是混乱的。（即，按第二、第四、第三、第一的顺序选择。刷新时固定）
• 如果有更多的帖子要加载，最后一个子将不会选择

编辑1

问题2解决了（感谢@Fabrizio Calderan）。我把a.load-more移出了ul。然而，当来回导航时，选择的顺序会混乱。