使用 jQuery 插入列表项时出现问题

Question

这里是 jQuery 的新手，但我正在尝试将无序列表插入 DOM，然后再插入列表项。 <ul> 被正确插入并被赋予 class .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

你有一个语法错误。

这是一个有效的 fiddle：

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 3

ul 的 class 名称必须是 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

Answer 4

这样写：

$(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

使用 jQuery 插入列表项时出现问题

Issue with inserting list items with jQuery

html

javascript

jquery

list

append