Форум

nikoshot · #1 (**permalink**) 18.06.2021, 11:46

Есть который перебирает все .items и если их больше 4 шт то добавялем класс "view_hide" - это нужно для того что скрыть опции если их больше четырех... ВСе отлично работает когда на странице один такой товар с такими классами .options_no_buy > .items
Если товаров больше тогда код отрабатывает для первого товара верно.. а для всех остальных всем классам "items" он добавляет класс "view_hide" , т.е он один раз для первого товара посчитал, а дальше всем добавляет класс "view_hide"

max_view = 4;
        d = 0;
        jQuery(".options_no_buy > .items").each(function() {
            d += 1;
            if(d > max_view) {
                    jQuery(this).addClass("view_hide");
            }
        });

Помогите... плиз..
Нужно что бы код работало для каждого блока отдельно..
Например

<div class="options_no_buy ">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items view_hide">5</div>
    <div class="items view_hide">6</div>
</div>

<div class="options_no_buy ">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items view_hide">5</div>
    <div class="items view_hide">6</div>
    <div class="items view_hide">7</div>
    <div class="items view_hide">8</div>
    <div class="items view_hide">9</div>
</div>

рони · #2 (**permalink**) 18.06.2021, 12:27

nikoshot,

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .view_hide {
            background-color: rgba(0, 255, 255, 1)
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            let max_view = 4;
            $(".options_no_buy").each(function(i, {
                children
            }) {
                $(children).slice(max_view).addClass("view_hide")
            })
        });
    </script>
</head>

<body>
    <div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
    </div>

    <div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
    </div>

</body>

</html>

nikoshot · #3 (**permalink**) 18.06.2021, 14:19

Спасибо.. то что нужно!

nikoshot · #4 (**permalink**) 18.06.2021, 16:06

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

nikoshot,

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .view_hide {
            background-color: rgba(0, 255, 255, 1)
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            let max_view = 4;
            $(".options_no_buy").each(function(i, {
                children
            }) {
                $(children).slice(max_view).addClass("view_hide")
            })
        });
    </script>
</head>

<body>
    <div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
    </div>

    <div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
    </div>

</body>

</html>

Если не сложно.. можете еще помочь...
Нужно посчитать кол-во добавленных классов .view_hide
и передать это в тег с классом .sum
Если нужно могу оплатить на карту)

<div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items view_hide ">7</div>
        <div class="items view_hide ">8</div>
        <div class="items view_hide ">9</div>
        <div class="sum">тут должно быть кол-во классов .view_hide в даном примере 3</div>
    </div>

рони · #5 (**permalink**) 18.06.2021, 16:33

nikoshot,
не копируйте сообщения целиком, без надобности, есть цитирование.

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .view_hide {
            background-color: rgba(0, 255, 255, 1)
        }
        .sum{
            background-color: rgba(255, 0, 255, 1);
        }

    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            let max_view = 4;
            $(".options_no_buy").each(function(i, { children }) {
            let { length } = $(children).slice(max_view).addClass("view_hide"); 
            length && $(`<div class='sum'>${length}</div>`).appendTo(this)
            })
        });
    </script>
</head>

<body>
    <div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
    </div>

    <div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
    </div>

    <div class="options_no_buy ">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
    </div>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript