Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2021, 11:46
Аспирант
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 35

Помогите доработать код .each(function()
Есть который перебирает все .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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2021, 14:19
Аспирант
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 35

Спасибо.. то что нужно!
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2021, 16:06
Аспирант
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 35

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ребятки помогите найти код, который отвечает за стиль z-index kyivprogs Библиотеки/Тулкиты/Фреймворки 1 08.12.2015 17:46
Доработать простой код на JS Айратиус Элементы интерфейса 4 13.11.2014 09:00
Помогите написать код для интернет магазина журнала Grigor Элементы интерфейса 1 26.10.2014 18:07
Выпадающие списки. Помогите подправить код. cardsmoney Элементы интерфейса 6 18.02.2011 16:20
Код калькулятора на JS. помогите с ошибкой! kirill.psl Общие вопросы Javascript 9 26.08.2010 11:38