Question

我试图通过附加到css菜单的jquery函数获取列表值。

我的代码如下。

    $.fn.appmenu = function(options){

    //problem
    $(this).click(function(){
        alert($(this).filter("ul li").html());
    });

    $(this).hover(function(){
        $(this).filter("li").animate({
            top:"20px"
        });
    });

    //this.find('li:last').after("<li>test</li>");
    var lists = '<li title="Home" link="index.php"></li>';

    $.each(options, function(index, value) { 
        lists += '<li style="background-image:url(images/'+value[1]+'.png);" title="'+value[0]+'" link="'+value[1]+'"></li>';
    });

    return this.html("<ul>"+lists+"</ul>")
}

我使用以下方式调用我的菜单：

    //title, icon, link
$("#app-menu").appmenu([
    ["add", "address", "#link1"],
    ["contact", "comment", "#link2"],
    ["about", "pencil", "#link3"]
]);

任何帮助都会得到满足。

Answer 1

您必须使用find代替filter - filter正在查找当前集合中的元素，find正在查看当前集合中的所有元素以及整个子集

但是，结果将是相同的，因为html函数获取整个html，它位于匹配元素的第一个元素中 - 在您的示例中，<li>和</li>之间的内容< / p>

Answer 2

你的html结构不正确。 <li>代码无效，jQuery不喜欢您的lists变量内容。

我已经改变了你的小提琴，但它现在正在工作。请参阅http://jsfiddle.net/6yLYZ/。

使用jQuery插件获取无序列表的子元素

2 个答案: