Question

我在理解jQuery方面遇到了一些问题。

如果我有一个UL，它有一些通过jquery创建的动态Li元素，这将设置第一个li来选择类 - 例如

<li class='selected'>text</li>

编辑UDPATE：

好的。我所拥有的是一组动态生成的LI，来自REST调用，它是从文本框动态生成的。我需要发生的是基本上在我输入（keyup）之后我将显示一些结果（类似于自动完成）。我需要做的是在搜索框的上下文中检测向上和向下箭头并在树上上下移动“.selected”类。下面的代码适用于静态列表，而不是动态创建的。

一些示例代码：

$('.txtSearchBox')
.unbind('keypress keyup')
.bind('keypress keyup', function (e) {
    if ($(this).val().length < 3 && e.keyCode != 13) {
        $('.searchWrapper').hide();
    } else {
        $('.searchWrapper').show();
        SearchAutoComplete.init($('.searchWrapper'));
        SearchAutoComplete.load();
    }

    if (e.keyCode == 38) { // up
        var selected = $(".selected");
        $(".searchWrapper li").removeClass("selected");
        if (selected.prev().length == 0) {
            selected.parent().children().last().addClass("selected");
        } else {
            selected.prev().addClass("selected");
        }
    }
    if (e.keyCode == 40) { // down
        var selected = $(".selected");
        $(".searchWrapper li").removeClass("selected");
        if (selected.next().length == 0) {
            selected.parent().children().first().addClass("selected");
        } else {
            selected.next().addClass("selected");
        }
    }
});

$(".searchWrapper li").live('mouseover', function (e) {
    $(".searchWrapper li").removeClass("selected");
    $(this).addClass("selected");
});

如您所见，此代码检测向上和向下箭头键。问题在于动态元素，它什么都不做。我只是感到困惑，因为on事件应该在li而不是a？

由于

克里斯

Answer 1

这是你的意思吗？ DEMO

使用each，您可以遍历元素并按照自己的意愿操纵它们。

$('ul.alist li').on('click', function(){

jQuery.each($('ul.alist li'), function() {
  $(this).removeClass('selected');

});
});

使用上面的代码，我所做的就是迭代li标签并删除'selected'类。

Answer 2

试试这个：

$(".searchWrapper ul").on('mouseover',"li", function () {
    $(".searchWrapper li").removeClass("selected");
    $(this).addClass("selected");
});

当您向on()函数（“li”）提供选择器时，从JQuery docs委托事件处理程序。

需要jQuery on（）选择器辅助

2 个答案: