使用 jQuery 插入列表项的问题答案

【问题标题】：Issue with inserting list items with jQuery使用 jQuery 插入列表项的问题
【发布时间】：2015-06-21 08:42:29
【问题描述】：

这里 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

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

【问题讨论】：

addClass/hasClass('className') 不应该有.-dot
另外你的小提琴正在使用 onload 和 document.ready - 使用任何一个
@mplungjan 啊，谢谢，更新了小提琴。

标签： javascript jquery html list append

【解决方案1】：

这样写：

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

【讨论】：

不。 hasClass 和 addClass 中没有点。除非按钮是动态插入的，否则也不需要委托
这很好，只要您不使用'.newList' 作为选择器。无需在这里投反对票
现在好了。原来不好，我已经删除了反对票。 Chrome 不适用于 hasClass 和 addClass 中的点。现在它与the first correct post 相同，除了不必要的委托

【解决方案2】：

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

【讨论】：

【解决方案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!");
        }
    });
});

【讨论】：

【解决方案4】：

你有一个错字；当使用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!");
    }
});

【讨论】：

谢谢，错过了
@RoryMcCrossan 先到了那里。这是正确答案
@RoryMcCrossan 非常感谢您发现这一点并提供整理指南！语法错误确实是初学者的氪石。