Обернуть в div
Добрейшего дня Боги JS..
Нужна ваша помощь... Имею: несколько блоков с разными id (может быть любым) и этих блоков может быть любое количество, в них есть блоки с классом .price-section__list (Этих блоков может быть любое количество) в них есть свои блоки с информаией. <div id="blblblb1"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-section__list"> <div class="price-item">6</div> </div> <div class="price-section__list"> <div class="price-item">7</div> </div> </div> <div id="blblblb2"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-section__list"> <div class="price-item">6</div> </div> </div> Нужно что бы если в блоках с разными id (может быть любым) и этих блоков может быть любое количество, блоков с классом .price-section__list (Этих блоков может быть любое количество) больше 5 то эти 5 отображались бы, как есть, без изменений, а все последующие были обернуты в блок с классом .price-hidden-items вот так: <div id="blblblb1"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-hidden-items"> <div class="price-section__list"> <div class="price-item">6</div> </div> <div class="price-section__list"> <div class="price-item">7</div> </div> </div> </div> <div id="blblblb2"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-hidden-items"> <div class="price-section__list"> <div class="price-item">6</div> </div> </div> </div> <div id="blblblb3"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> </div> <div id="blblblb4"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-hidden-items"> <div class="price-section__list"> <div class="price-item">6</div> </div> <div class="price-section__list"> <div class="price-item">7</div> </div> <div class="price-section__list"> <div class="price-item">8</div> </div> <div class="price-section__list"> <div class="price-item">9</div> </div> </div> </div> Подскажите пожалуйста решение ... |
firsmember,
а поискать по форуму, есть с десяток примеров ... https://javascript.ru/forum/events/6...tml#post448151 |
Там много лишнего, мне просто оборачивать нужно при количестве свыше 5
|
обернуть после 5
firsmember,
:-? <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> div>.price-hidden-items { border: 1px red solid; } </style> <script> document.addEventListener("DOMContentLoaded", function() { let wrap = `<div class="price-hidden-items"></div>`; document.querySelectorAll("div > :first-child.price-section__list") .forEach(({ parentNode }) => { let { children } = parentNode, { length } = children; if (length > 5) { children = [...children].slice(5); parentNode.insertAdjacentHTML("beforeend", wrap); parentNode.querySelector(".price-hidden-items").append(...children); } }) }); </script> </head> <body> <div id="blblblb1"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-section__list"> <div class="price-item">6</div> </div> <div class="price-section__list"> <div class="price-item">7</div> </div> </div> <div id="blblblb2"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-section__list"> <div class="price-item">6</div> </div> </div> </body> </html> |
Прошу прощения, а можно еще одна просьба?
Можете тоже самое только на jQuery ? |
Цитата:
https://javascript.ru/forum/jquery/3...na-jquery.html https://javascript.ru/forum/showthre...472#post525428 |
Цитата:
|
jQuery(".price-section__list").each(function(){ var li = $(".price-item:gt(4)",this); if (li.size()){ $('<div class="btn-center"><div class="btn btn--white js-price-more">Смотреть еще</div></div>').appendTo($(this)) li.wrapAll("<div class='price-hidden-items'></div>"); } }); Написал вот так и не работает, что не так? |
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> div>.price-hidden-items { border: 1px red solid; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { $("div > .price-section__list:nth-child(6)").each((_, e) => { $(e).nextAll().add(e).wrapAll("<div class='price-hidden-items'></div>") }) }); </script> </head> <body> <div id="blblblb1"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-section__list"> <div class="price-item">6</div> </div> <div class="price-section__list"> <div class="price-item">7</div> </div> </div> <div id="blblblb2"> <div class="price-section__list"> <div class="price-item">1</div> </div> <div class="price-section__list"> <div class="price-item">2</div> </div> <div class="price-section__list"> <div class="price-item">3</div> </div> <div class="price-section__list"> <div class="price-item">4</div> </div> <div class="price-section__list"> <div class="price-item">5</div> </div> <div class="price-section__list"> <div class="price-item">6</div> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 13:03. |