Question

这里对jQuery很新，但我试图在DOM中插入一个无序列表，然后插入列表项。 <ul>正在正确插入，并且正在为类.newList提供，但<li>元素未被追加。不应.append将其插入ul？

这是HTML：

<!--List inserted with jQuery-->
<button id="modifyExample2">Click me to insert a list!</button>

这是我的剧本：

    $("#modifyExample2").on("click", function () {
        if ($(this).prev("ul").hasClass("newList")) {
            $(".newList").append("<li>New list item!</li>");
        } else {
            $("<ul>My new list!</ul>").insertBefore(this);
            $(this).prev("ul").addClass("newList");
            $("#modifyExample2").text("Click me again to insert list items!");
        }
    });

这是JSFiddle：Fiddle

有什么我误解/遗失的吗？

Answer 1

你有一个错字;使用addClass和hasClass时，您不需要使用.前缀：

if ($(this).prev("ul").hasClass("newList")) {
    $(".newList").append("<li>New list item!</li>");
} else {
    $("<ul>My new list!</ul>").insertBefore(this);
    $(this).prev("ul").addClass("newList");
    $("#modifyExample2").text("Click me again to insert list items!");
}

Working fiddle

请注意，您还可以稍微整理一下逻辑：

$("#modifyExample2").on("click", function () {
    var $ul = $(this).prev('ul');        
    if ($ul.hasClass("newList")) {
        $ul.append("<li>New list item!</li>");
    } else {
        $("<ul>My new list!</ul>").addClass("newList").insertBefore(this);
        $(this).text("Click me again to insert list items!");
    }
});

Answer 2

写下这个：

$(document).ready(function () {
    $(document).on("click","#modifyExample2", function () {
        if ($(this).prev().hasClass("newList")) {
            $(this).prev().append("<li>New list item!</li>");
        } else {
            $("<ul>My new list!</ul>").insertBefore(this);
            $(this).prev("ul").addClass("newList");
            $(this).text("Click me again to insert list items!");
        }
    });
});

DEMO

Answer 3

您遇到语法错误。

这是一个工作小提琴：

https://jsfiddle.net/pzj6kp7g/9/

$(document).ready(function () {
    $("#modifyExample2").on("click", function () {
        if ($(this).prev("ul").hasClass("newList")) {
            $(".newList").append("<li>New list item!</li>");
        } else {
            $("<ul>My new list!</ul>").insertBefore(this);
            $(this).prev("ul").addClass("newList");
            $("#modifyExample2").text("Click me again to insert list items!");
        }
    });
});

Answer 4

ul的班级名称必须是newList而不是.newList

$("#modifyExample2").on("click", function () {
    if ($(this).prev("ul").hasClass("newList")) {
        $(".newList").append("<li>New list item!</li>");
    } else {
        $("<ul>My new list!</ul>").insertBefore(this);
        $(this).prev("ul").addClass("newList");
        $("#modifyExample2").text("Click me again to insert list items!");
    }
});

请参阅fiddle

使用jQuery插入列表项的问题

4 个答案: