Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Обернуть в div (https://javascript.ru/forum/dom-window/83054-obernut-v-div.html)

firsmember 03.09.2021 14:41
Обернуть в 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>


Подскажите пожалуйста решение ...

рони 03.09.2021 15:17
firsmember,
а поискать по форуму, есть с десяток примеров ...
https://javascript.ru/forum/events/6...tml#post448151

firsmember 03.09.2021 19:13
Там много лишнего, мне просто оборачивать нужно при количестве свыше 5

рони 03.09.2021 20:46
обернуть после 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>

firsmember 04.09.2021 10:43
Прошу прощения, а можно еще одна просьба?
Можете тоже самое только на jQuery ?

рони 04.09.2021 11:08
Цитата:
Сообщение от firsmember
Можете тоже самое только на jQuery ?
надо поискать на форуме :lol:
https://javascript.ru/forum/jquery/3...na-jquery.html

https://javascript.ru/forum/showthre...472#post525428

voraa 04.09.2021 15:25
Цитата:
Сообщение от firsmember
Можете тоже самое только на jQuery ?
А зачем, если и так работает?

firsmember 04.09.2021 15:48 
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>");
    }

});


Написал вот так и не работает, что не так?

рони 04.09.2021 18:21
Цитата:
Сообщение от firsmember
тоже самое только на jQuery ?
:-? 
<!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, время: 16:45.