使用jQuery插件的cookie附加到這個

Question

我遇到麻煩的代碼只追加到醇是被點擊的工作....現在其附加到所有的醇的

繼承人的小提琴IM的嘗試與 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")); 
}); 

Answer 1

我想這是你想要什麼：

$(".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); 
});