如何在「動作」中將ul內的圖像li項目複製到第二個ul？

我正在處理一個包含無序列表中的圖像列表的項目，並且我認爲能夠執行將複製列表項目並將其添加到第二個無序列表中的操作是很整潔的。基本上，這將創建一個收藏夾列表，同時保持原始列表。如何在「動作」中將ul內的圖像li項目複製到第二個ul？

我相當新的HTML，所以我不知道我怎麼能實現這一點。任何幫助，將不勝感激。

2014-07-06 user3799026

使用['JOuery']（http://jquery.com/）很容易。 –

@ PM77-1我只是在學習JQuery。你能舉一個例子嗎？我一直在嘗試這樣： 'if（e.ctrlKey）{（'。menu'）。attr（'id'，selectId）; selectId.clone（true）.appendTo（'。favMenu ul'）; }' – user3799026

如果您想要通過單擊其中一個圖像來觸發您的操作，則需要將事件監聽器添加到所有原始圖像。 –

以下是純JS中的整個JSFiddle（沒有實際圖像）。

function copyToFavorites(event) { 
    var image = event.srcElement; 
    var src = image.src; 
    var dup; 

    // determine if it's a duplicate 
    var ul = document.getElementById("fav"); 
    var images = ul.getElementsByTagName("img"); 
    for (var i = 0; i < images.length; ++i) { 
     dup = (images[i].src === src); 
     if (dup) { 
      break; 
     }  
    } 
    // if not a duplicate - add to favorites 
    if (! dup) { 
     var li = document.createElement("li"); 
     var newImg = document.createElement("img"); 
     newImg.src = src; 
     li.appendChild(newImg); 
     ul.appendChild(li); 
    } else { 
     alert("This ismage is already in Favorites"); 
    } 
}

無法拿出任何東西更優雅：

我通過for環路下面的函數內部實現重複的排斥。

來源

2014-07-06 20:50:10

非常感謝。我最終想出了一些類似的東西。在這裏：。 '$（文件）。就緒（函數（）{ \t $（ '菜單 '）找到（' A'）點擊（函數（E）{ \t \t VAR selectName = $ （本）.attr（ '姓名'）， \t \t \t SELECTID = $（本）.attr（ 'ID'）; \t \t如果（e.which == 2）{ \t \t $（」 favMenu。「）.append（ '

'+ $（本）的.html（）+'

'）; \t \t \t \t \t \t} \t}）; }）;' 由於重複問題是我沒有解決的問題，您的代碼肯定比我的代碼更重要。但是，我發現我無法編輯這些重複元素的CSS，以便它們具有綠色邊框。 – user3799026

您可以使用javascript，jQuery或任何其他幫助來實現它。使用jQuery檢查這個例子。它只在示例中有文本，但它可以與li標籤中的任何內容一起使用。 http://goo.gl/bplTrm

來源

2014-07-06 00:55:30 jtorrescr

如何在「動作」中將ul內的圖像li項目複製到第二個ul？

回答

相關問題