如何将ul中的图像li项复制到“action”上的第二个ul?

时间:2014-07-06 00:30:17

标签: html duplicates

我正在开发一个项目,其中包含无序列表中的图像列表,我认为能够执行一个复制列表项并将其添加到第二个无序列表的操作会很简单。基本上,这将创建一个收藏夹列表,同时保持原始列表。

我是html的新手,所以我不确定如何实现这个目标。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

您可以使用javascript,jQuery或任何其他帮助来实现它。使用jQuery检查此示例。它只有示例中的文本,但它可以与li标签内的任何内容完美配合。 http://goo.gl/bplTrm

答案 1 :(得分:0)

这里是纯JS中的整个JSFiddle(没有实际图像)。

我通过以下函数中的for循环实现了重复项的排除:

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

无法想出任何更优雅的东西。