javascript - 使用jQuery Cookie插件追加到此

我在使代码只能附加到被单击的ol时遇到麻烦....现在将其附加到所有ol的附加中

试图与之共鸣的小提琴
http://jsfiddle.net/Xg36L/6/

继承人的HTML

<p>This is another paragraph.</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>

这是js

$("ol").append($.cookie("listItem"));
$(".btn2").click(function () {
    var newLi = $("<li class='new'>Appended item</li>").appendTo("ol");
    $.cookie("listItem", (($.cookie("listItem") ? $.cookie("listItem") : '') + newLi.clone().wrap('<div />').parent().html()));
});
$(".btn3").click(function () {
    $.removeCookie('listItem');
    $("li.new ol").remove();
});
$(".btn4").click(function () {
    alert($.cookie("listItem"));
});

最佳答案

我认为这是您想要的：

$(".append-btn").on("click", function() {
   var newLi = ...
   $(this).siblings("ol").append(newLi);
});

重复的id属性无效。将选择器更改为类，然后$(this)将为您提供您单击的特定按钮。

编辑实际上，您将需要更多的html标记以向javascript提供有关插入位置的提示。

一种选择是将列表和按钮集包装在div或span中。然后上面的代码将起作用。

<div>
    <p></p>
    <ol>...</ol>
    <button class="append-btn">Append</button>
    <button class="clear-btn">Clear</button>
    <button class="show-btn">Show</button>
</div>

另一种选择是将唯一的id赋予列表。

<ol id="list1">...</ol>
<button class="append-btn" data-id="1">Append</button>

$(".append-btn").on("click", function() {
    var id = $(this).data("id");
    $("#list" + id).append(newLi);
});