0

Имеется множество div с одинаковым классом dashboard__dropdown-item , в примере их 6. На деле может быть меньше или больше. Необходимо чтобы если их больше 3 добавлять их в родитель с классом dashboard__dropdown-container, а также добавлять им класс dashboard__dropdown-item-active. При этом первые 3 div оставлять в том же месте.

Класс я добавляю, но из-за того что это делается динамически я не могу добавить их в родитель dashboard__dropdown-container

Подскажите как это можно сделать? Всем заранее спасибо за любую помощь!

    $('.dashboard__dropdown-item').addClass( firstThreeOnly );
    function firstThreeOnly( index, classAttribute ) {
        return ( index > 2 ? 'dashboard__dropdown-item-active' : '' );
        $('.dashboard__dropdown-item-active').appendTo('.dashboard__dropdown-container');
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard__items-content">
    <a href="#" class="dashboard__dropdown-item">
       <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
       </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
       <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
       </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
       <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
       </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
       <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
       </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
       <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
       </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
       <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
       </div>
    </a>

    <div class="dashboard__dropdown-more">
         <div class="dashboard__dropdown-container">
         <!--  -->
         </div>
     </div>
</div>

1 ответ 1

1

У вас функция firstThreeOnly вторую строку не обрабатывает, т.к. на первой строке вы возвращаете значение return ( index > 2 ? 'dashboard__dropdown-item-active' : '' ); Если я правильно понял, то так будет правильно.

let items = $('.dashboard__dropdown-item');
let container = $('.dashboard__dropdown-container')
//если класс "dashboard__dropdown-item-active" надо всем элементам добавлять, то переместите его до условия.
items.each((index, item) => {
    (index > 2) && $(item).addClass('dashboard__dropdown-item-active').appendTo(container);
})
.dashboard__dropdown-container {
background-color: lightGreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard__items-content">
    <a href="#" class="dashboard__dropdown-item">
        <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
        </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
        <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
        </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
        <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
        </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
        <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
        </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
        <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
        </div>
    </a>

    <a href="#" class="dashboard__dropdown-item">
        <div class="dashboard__dropdown-item-text">
            <div class="dashboard__dropdown-name">Text Here</div>
        </div>
    </a>

    <div class="dashboard__dropdown-more">
        <div class="dashboard__dropdown-container">
            <!--  -->
        </div>
    </div>
</div>

3
  • Да это работает, а как сделать чтобы на ширине до 1280px оставалось 3 элемента, на ширине 767 - 1280 оставалось 2 элемента, а затем элементы не перекидывались в родителя dashboard__dropdown-container вовсе?
    – Daniil Lav
    18 янв 2020 в 16:56
  • @DaniilLav смотрите в сторону window.matchMedia
    – xydope
    18 янв 2020 в 17:59
  • Так и пробую решить, спасибо Вам за помощь!
    – Daniil Lav
    19 янв 2020 в 9:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.