使用 JQuery 将复选框添加到无序列表

Adding a checkbox to an unordered list using JQuery

本文关键字：无序 列表 添加 复选框 JQuery 使用      更新时间：2023-09-26

我有一个无序列表（可以嵌套），例如：

<div id="checklist">
    <ul>
        <li>On Page SEO
            <ul>
                <li>My work <i>And note.</i>
                <li>Your work <i>Blah</i>
            </ul>
        </li>
        <li>Is this love?</li>
    </ul>
</div>

在文档准备就绪时，我想在文本之前为每个<li>标签添加一个复选框。我目前有以下内容，将其添加到文本之后：

$(document).ready(function () {
     $('<input type="checkbox" value="1" />').appendTo('li');
 });

使用prependTo()而不是appendTo()就可以了

试试这个：

$(document).ready(function () {
     $('div#checklist ul li').prepend('<input type="checkbox" value="1" />');
 });

或：

$(document).ready(function () {
    $('<input type="checkbox" value="1" />').prependTo("li");
 });

我认为您要做的是在其中包含不包含ul的任何li旁边附加复选框，如果是这样，那么您可以执行以下操作：

$('ul li').not(':has("ul")').append('<input type="checkbox" value="1" />');

您还需要在 HTML 标记中使用</li>关闭<li>。

小提琴演示

相关文章：