Скрыть часть комментариев.
Привет. Решил часть ответов на комменты скрыть. Как в вк, например. Сам код накидал, а вот как ссылку разместить в нужном месте,нужна помощь.
Вот так выглядит html <div id="6" class="comment" data-parent="0" data-level="1">...</div> <div id="7" class="comment" data-parent="6" data-level="2">...</div> <div id="8" class="comment" " data-parent="6" data-level="2">...</div> <div id="9" class="comment" " data-parent="6" data-level="2">...</div> <div id="10" class="comment" data-parent="0" data-level="1">...</div> <div id="11" class="comment" data-parent="10" data-level="2">...</div> <div id="12" class="comment" data-parent="10" data-level="2">...</div> <div id="13" class="comment" data-parent="10" data-level="2">...</div> Например я хочу скрыть больше одного ответа. Значит ссылку нужно разместить после id=7 и id=11. Сама ссылка как то так наверное).
var elem = document.querySelectorAll(".comment");
let tag_a = document.createElement('a');
tag_a.textContent = '--------Смотреть все---------';
for (var i = 0, length = elem.length; i < length; i++) {
let id = $(elem[i]).attr('id');
let parent = $(elem[i]).attr('data-parent');
tag_a.id = parent;
if(//Вот это условие надо){
elem[i].parentNode.insertBefore(tag_a, elem[i].nextSibling);
}
}
Тоесть ID ссылки будет значение data-parent |
ureech, лучше ты контент переделай сразу. Зачем формировать "как ненужно"... А потом "делать как нужно".
|
Например так...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.box > div {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
})
</script>
</head>
<body>
<div id="6" class="comment" data-parent="0" data-level="1">...</div>
<div class='box'>
<a href='#'>Смотреть все</a>
<div id="7" class="comment" data-parent="6" data-level="2">...</div>
<div id="8" class="comment" " data-parent="6" data-level="2">...</div>
<div id="9" class="comment" " data-parent="6" data-level="2">...</div>
</div>
<div id="10" class="comment" data-parent="0" data-level="1">...</div>
<div class='box'>
<a href='#'>Смотреть все</a>
<div id="11" class="comment" data-parent="10" data-level="2">...</div>
<div id="12" class="comment" data-parent="10" data-level="2">...</div>
<div id="13" class="comment" data-parent="10" data-level="2">...</div>
</div>
</body>
</html>
|
ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div id="6" class="comment" data-parent="0" data-level="1">6...</div>
<div id="7" class="comment" data-parent="6" data-level="2">7...</div>
<div id="8" class="comment" data-parent="6" data-level="2">8...</div>
<div id="9" class="comment" data-parent="6" data-level="2">9...</div>
<div id="10" class="comment" data-parent="0" data-level="1">10...</div>
<div id="11" class="comment" data-parent="10" data-level="2">11...</div>
<div id="12" class="comment" data-parent="10" data-level="2">12...</div>
<div id="13" class="comment" data-parent="10" data-level="2">13...</div>
<script>
var elem = document.querySelectorAll(".comment[data-level='2']");
let tag_a = document.createElement('a');
tag_a.textContent = '--------Смотреть все---------';
let obj = {};
elem.forEach(el => {
let {
parent
} = el.dataset;
obj[parent] ??= 0;
if (obj[parent] == 1) el.before(tag_a.cloneNode(true));
obj[parent]++;
})
</script>
</body>
</html>
|
Цитата:
|
рони,
Спасибо. |
| Часовой пояс GMT +3, время: 06:48. |