Форум

firsmember · #1 (**permalink**) 03.09.2021, 14:41

Добрейшего дня Боги 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>

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

рони · #2 (**permalink**) 03.09.2021, 15:17

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

firsmember · #3 (**permalink**) 03.09.2021, 19:13

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

рони · #4 (**permalink**) 03.09.2021, 20:46

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 · #5 (**permalink**) 04.09.2021, 10:43

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

рони · #6 (**permalink**) 04.09.2021, 11:08

Сообщение от firsmember

Можете тоже самое только на jQuery ?

надо поискать на форуме

https://javascript.ru/forum/jquery/3...na-jquery.html

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

voraa · #7 (**permalink**) 04.09.2021, 15:25

Сообщение от firsmember

Можете тоже самое только на jQuery ?

А зачем, если и так работает?

firsmember · #8 (**permalink**) 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>");
    }

});

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

рони · #9 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript