javascript - 克隆所有链接并将其附加到容器

Question

我想要“克隆全部”按钮来克隆每个单独的链接并将其附加到#container。

但是，当您现在单击该按钮时，它只会对文档中的第一个链接 (www.google.com) 进行 3 个克隆，并跳过其他两个链接 (www.facebook.com 和 www.youtube.com) 。

我很确定我需要使用数组。我尝试将 a 类('.link')存储在数组中，并尝试使用each() 方法 - 但我无法使其工作:-/

CodePen: http://codepen.io/StrengthandFreedom/pen/eZgbKq/

jQuery:

var links = $('.link');
var hrefs = $(links).attr('href'); // grab a href attribute from links
var cloneAllLinks = $('.btn-clone-all-links');

$(cloneAllLinks).on('click', function(event) {

  $(links).clone().text(hrefs).append('<li></li>').appendTo('#container');

});

有人可以告诉我我在这里缺少什么吗？ :-)

Answer 1

您需要将每个单独的 href 属性值存储在数组中:

var linkArray = $('.link').map(function(index, link) { return $(link).attr('href'); });

然后您可以循环该数组，将每个项目写入#container div:

$(cloneAllLinks).on('click', function(event) {
    $.each(linkArray, function(index, val){
        var linkTemplate = '<li>' + val + '</li>' 
        $('#container').append(linkTemplate);
    })
});

参见http://codepen.io/anon/pen/GZrzba