0

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

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

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

编辑UDPATE：

好的..所以我拥有的是一组从文本框动态生成的 REST 调用动态生成的 LI。我需要做的是基本上在我输入（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？

谢谢

克里斯

4

2 回答 2

0

这是你的意思吗？演示

使用each，您可以遍历您的元素并根据需要操作它们。

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

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

});
});

使用上面的代码，我所做的就是遍历 li 标签并删除“selected”类。

于 2012-08-25T23:08:26.287 回答
0

试试这个：

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

从 JQuery文档中，当您为函数（“li”）提供选择器时，on()事件处理程序被委派。

于 2012-08-25T23:10:32.267 回答