Stack Overflow на русском Asked on November 7, 2021
Как можно клонировать элементы ? сейчас есть массив с 2мя картинками. Нужно что бы если я загрузил ,например в массив еще N картинок то элементы копировались в зависимости от количества загруженных элементов
https://codepen.io/camobap6/pen/jOWXjbB
let pictures=[ 'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
];
let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');
let clone = elem.cloneNode(true);
parent.appendChild(clone);
const elements = document.querySelectorAll('.elem')
elements.forEach((el, i) => {
let img = document.createElement('img');
img.src = pictures[i]
el.append(img)
}).parent{
border:solid red 1px;
width:600px;
height:400px;
display:flex;
flex-wrap:wrap;
}
.elem{
width:200px;
height:200px;
border:solid red 1px;
background-size: cover;
background-position: center;
overflow: hidden;
}<div class="parent" id="parent">
<div class="elem">
</div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
border:solid red 1px;
width:600px;
height:400px;
display:flex;
flex-wrap:wrap;
}
.elem{
width:200px;
height:200px;
border:solid red 1px;
background-size: cover;
background-position: center;
over
</style>
</head>
<body>
<div class="parent" id="parent">
</div>
</body>
<script type="text/javascript">
let pictures=[ 'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80'
];
//---------------------Доп функции для построения dom-------------------------------
// Функция строит div в котором img
create_div = function (obj){
let elem = document.createElement('div');
if(obj.id!=undefined){elem.id=obj.id};
if(obj.className!=undefined){elem.className=obj.className};
return elem
}
// Функция строит img
create_image = function (obj){
let elem= document.createElement('img');
if(obj.className!=undefined){elem.className=obj.className};
if(obj.id!=undefined){elem.id=obj.id};
if(obj.src!=undefined){elem.src=obj.src};
if(obj.width!=undefined){elem.width=obj.width};
if(obj.height!=undefined){elem.height=obj.height};
if(obj.title!=undefined){elem.title=obj.title};
return elem
}
// Функция строит собирает div и img вместе
create_div_blok = function(obj,obj1){
let div =create_div(obj);
div.appendChild(create_image(obj1));
return div;
}
//-------------------------------------------------------------------------------
// Задает параметры блока elem
obj = {
"id": undefined,
"className": "elem",
"name":undefined
}
// строим вертуальный dom
let frag = document.createDocumentFragment()
// перебираем массив и строим блок с картинками
for (q = 0; q < pictures.length; ++q) {
// Задает параметры блока img
obj1 = {
"id": "",
"src": pictures[q],
"title": 50,
"width":70,
"height":44,
"title":"kjj",
}
//добовляем сформированный div в вертуальный dom
frag.appendChild(create_div_blok(obj, obj1));
}
var container = document.getElementById("parent");
//Вставляем созданый вертуальный dom в div c id="parent"
container.appendChild(frag);
</script>
</html>
Твой подход с cloneNode, не совсем подходит в такой истории. Суть кода состоит в том чтоб в цикле перебрать массив pictures.И в момент перебора формировать div а внутри img. Так что алгаритм задачи таков, а реализовать его можно многими спосабами.Css не трогал и не оформлял.Скрипт формирует количество div с img в зависимости от массива pictures
Answered by Андрей Солуянов on November 7, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP