Показать сообщение отдельно
  #4 (permalink)  
Старый 03.09.2021, 20:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

обернуть после 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>
Ответить с цитированием