22.03.2018, 01:28
|
|
Аспирант
|
|
Регистрация: 05.05.2016
Сообщений: 92
|
|
|
Дублировать div и заполнить из массива
Добрый вечер, есть массив и блок <div> его нужно скопировать и заполнить из контента
<div class="posting">
<div class="head">
last message
</div>
<div class="list-post">
<div class="post">
<div class="author"><a href="#">test1</div>
<div id = 'message' class="link"><a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test2</div>
<div id = 'message' class="link"><a href="#">hello1</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test3</div>
<div id = 'message' class="link"><a href="#">hello2</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test4</div>
<div id = 'message' class="link"><a href="#">hello3</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
</div>
let list-message =
[{user: "test1", last: "hello"},
{user: "test2", last: "hello2"},
{user: "test3", last: "hello2"},
{user: "test4", last: "hello3"}]
Как это организовать в коде?
|
|
22.03.2018, 02:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
SpaceAlarm,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="list-post">
<div class="post">
<div class="author"><a href="#">test1</div>
<div id = 'message' class="link"><a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test2</div>
<div id = 'message' class="link"><a href="#">hello1</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test3</div>
<div id = 'message' class="link"><a href="#">hello2</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
<div class="post">
<div class="author"><a href="#">test4</div>
<div id = 'message' class="link"><a href="#">hello3</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
</div>
<script>
var list = [].map.call( document.querySelectorAll('.post'), function(el) {
return {user : el.querySelector('.author').textContent.trim(),
last : el.querySelector('.link').textContent.trim()}
});
document.write(JSON.stringify(list))
</script>
</body>
</html>
|
|
22.03.2018, 03:06
|
|
Аспирант
|
|
Регистрация: 05.05.2016
Сообщений: 92
|
|
Вы наверное меня не так поняли, мне нужно из массива вставить данные в list-post, типо как чат, и блок <div class="post"> должен быть в html 1 раз, а в js создавать такие же блоки и заполнять информацией из массива.
let list-message =
[{user: "name1", last: "welcome1"},
{user: "name2", last: "welcome2"},
{user: "name3", last: "welcome3"},
{user: "name4", last: "welcome4"}]
Последний раз редактировалось SpaceAlarm, 22.03.2018 в 03:25.
|
|
22.03.2018, 07:41
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="list-post"></div>
<script>
let listMessage =
[{user: "name1", last: "welcome1"},
{user: "name2", last: "welcome2"},
{user: "name3", last: "welcome3"},
{user: "name4", last: "welcome4"}];
listMessage.forEach(el=>{
document.querySelector(".list-post").insertAdjacentHTML('beforeend', `<div class="post">
<div class="author"><a href="#">${el.user}</a></div>
<div id = 'message' class="link">${el.last}<a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>`);
});
</script>
</body>
</html>
|
|
22.03.2018, 08:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
создание блоков из массива
SpaceAlarm,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="list-post">
<div class="post">
<div class="author"><a href="#">test1</a></div>
<div id = 'message' class="link"><a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
</div>
<script>
var list = [{
user: "name1",
last: "welcome1"
}, {
user: "name2",
last: "welcome2"
}, {
user: "name3",
last: "welcome3"
}, {
user: "name4",
last: "welcome4"
}];
var parent = document.querySelector(".list-post"),
template = parent.removeChild(parent.querySelector(".post")),
content = document.createDocumentFragment();
list.reduce(function(content, el) {
var clone = template.cloneNode(true);
clone.querySelector(".author").textContent = el.user;
clone.querySelector(".link").textContent = el.last;
content.appendChild(clone);
return content;
}, content);
parent.appendChild(content);
</script>
</body>
</html>
|
|
22.03.2018, 11:55
|
|
Аспирант
|
|
Регистрация: 05.05.2016
Сообщений: 92
|
|
|
Благодарю, работает, спасибо!
|
|
22.03.2018, 14:54
|
|
Аспирант
|
|
Регистрация: 05.05.2016
Сообщений: 92
|
|
Сообщение от рони
|
SpaceAlarm,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="list-post">
<div class="post">
<div class="author"><a href="#">test1</a></div>
<div id = 'message' class="link"><a href="#">hello</a></div>
<div class="info">info <a href="#">click</a></div>
</div>
</div>
<script>
var list = [{
user: "name1",
last: "welcome1"
}, {
user: "name2",
last: "welcome2"
}, {
user: "name3",
last: "welcome3"
}, {
user: "name4",
last: "welcome4"
}];
var parent = document.querySelector(".list-post"),
template = parent.removeChild(parent.querySelector(".post")),
content = document.createDocumentFragment();
list.reduce(function(content, el) {
var clone = template.cloneNode(true);
clone.querySelector(".author").textContent = el.user;
clone.querySelector(".link").textContent = el.last;
content.appendChild(clone);
return content;
}, content);
parent.appendChild(content);
</script>
</body>
</html>
|
Еще вопрос, <a href="#">test1</a>, <a href="#">hello</a> удаляется тэг ссылки как исправить?
Последний раз редактировалось SpaceAlarm, 22.03.2018 в 15:00.
|
|
22.03.2018, 15:23
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
SpaceAlarm,
Добавить красное
clone.querySelector(".author a").textContent = el.user;
clone.querySelector(".link a").textContent = el.last;
|
|
22.03.2018, 15:53
|
|
Аспирант
|
|
Регистрация: 05.05.2016
Сообщений: 92
|
|
|
Благодарю!
|
|
22.03.2018, 16:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Dilettante_Pro,
|
|
|
|
