使用JQuery將復選框添加到無序列表

Question

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

<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');
 });

Answer 1

使用prependTo()而不是appendTo()可以解決問題

Answer 2

嘗試這個：

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

要么：

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

Answer 3

我認為您要執行的操作是在其中不包含ul任何li旁邊添加復選框，如果是這樣，則可以執行以下操作：

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

您還需要在HTML標記中使用</li>關閉<li> 。

小提琴演示