Имеется множество 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>