复制和修改元素，以便在html文档的另一部分使用它们

copy and modify elements to use them on another part of an html document

本文关键字：一部分 另一部 文档 html 元素 修改 复制      更新时间：2024-04-10

我有一个带有4个图像的滑块，我想使用滑块标记在文档的另一部分生成缩略图。在这种情况下，我使用了带有缩略图所需信息的数据属性。

这是滑块部分的代码：

        <div id="sliderWrapper">
            <div id="slider">
                <div class="image" data-slide="1" data-thumb="thumb1.jpg" style="background-image: url('slide1.jpg');"></div>
                <div class="image" data-slide="2" data-thumb="thumb2.jpg" style="background-image: url('slide2.jpg');"></div>
                <div class="image" data-slide="3" data-thumb="thumb3.jpg" style="background-image: url('slide3.jpg');"></div>
                <div class="image" data-slide="4" data-thumb="thumb4.jpg" style="background-image: url('slide4.jpg');"></div>
            </div>
        </div>

应使用此标记生成以下内容：

        <div id="sliderThumbs">
            <a class="item" data-slide="1" style="background-image: url('thumb1.jpg');"></a>
            <a class="item" data-slide="2" style="background-image: url('thumb2.jpg');"></a>
            <a class="item" data-slide="3" style="background-image: url('thumb3.jpg');"></a>
            <a class="item" data-slide="4" style="background-image: url('thumb4.jpg');"></a>
        </div>

问题是，我如何"复制"answers"修改"标记。

我的第一次尝试是使用jquery获取滑块div的子级：

var images = $('#slider').children('div').map(function(){
    console.log($(this).attr('src'));
}).get();

但这样做效果不太好。我希望有人能帮助我实现这一目标。如何获取所有四个div并使用数据属性生成所需的标记？

谢谢！

使用find/attribute设置基于源元素创建一个新元素，并使用$.append（）将其添加到目标元素。。。

这是一个工作解决方案

$("div.image").click(function(e){
    var clicked = $(e.target);
    var imageURL= "url('" + clicked.attr("data-thumb") + "')";
    var toAppend = $("<a>")
                        .attr("data-slide", clicked.attr("data-slide"))
                        .css("background-image", imageURL)
                        .addClass("item")
                        .text("added "+ clicked.text());
    $("#sliderThumbs").append(toAppend);
});

编辑了每个分区的文件加载小提琴。

    $("div.image").each(function(index, d){
    var div = $(d);
    var imageURL= "url('" + div.attr("data-thumb") + "')";
    var toAppend = $("<a>")
                        .attr("data-slide", div.attr("data-slide"))
                        .css("background-image", imageURL)
                        .addClass("item")
                        .text("added "+ div.text());
    $("#sliderThumbs").append(toAppend);
});

$(function(){
var count = 1;
var img = $('#slider > .image').each(function(){           
if($(this).attr('data-thumb')){             
    var vimg = $(this).attr('data-thumb');
    var data = "<a class='item' data-slide='"+count+"' style='background-image: url("+vimg +")';></a>"
    console.log(data);   
   count++;         
             };
   });
});
相关文章：