jQuery сортировка карточек со стрелками вверх / вниз

Question

Я использую Bootstrap карточек на странице, где я хочу, чтобы эти карточки сортировались с помощью стрелок вверх и вниз. Каждая карточка имеет стрелки в заголовке, чтобы переместить ее вверх или вниз в макете. Но, конечно, когда он перемещается наверх, стрелка вверх должна исчезнуть, также как и когда он достигает дна.

Я пытался использовать операторы if в этом стиле:

// Result: Is never executed.
if(!$(card).find('.sort-down')) {}

// Result: Is always executed.
if($(card).not(':has(.sort-down)') {}

Где $(card) - это div, содержащая полную карту, которая перемещается. Например, мой полный кодовый блок "move down".

$(document).on('click', '.sort-down', function(e) {
    e.preventDefault();
    let card = $(this).closest('.card');
    let sort_id = $(card).attr('data-sort');
    let next_sort_id = Number(sort_id) + 1;

    $('[data-sort]').each(function(index, value) {
        if($(value).attr('data-sort') == next_sort_id) {
            $(value).after($(card));
            $(value).attr('data-sort', sort_id);
            $(card).attr('data-sort', next_sort_id);

            // Change buttons
            if($(card).attr('data-sort') == sortCount - 1) {
                $(card).find('.sort-down').remove();
                if(!$(card).find('.sort-up')) {
                    // Insert up arrow
                }
            } else {
                if(!$(card).find('.sort-up')) {
                    // Insert up arrow
                }
                if(!$(card).find('.sort-down')) {
                    // Insert down arrow
                }
            }

            if($(value).attr('data-sort') == 0) {
                $(value).find('.sort-up').remove();
                if(!$(value).find('.sort-down')) {
                    // Insert down arrow
                }
            } else {
                if(!$(value).find('.sort-down')) {
                    // Insert down arrow
                }
                if(!$(value).find('.sort-up')) {
                    // Insert up arrow
                }
            }

            return false;
        }
    });
});

Немного из HTML, чтобы вы могли понять, какие классы / атрибуты выбирает мой jQuery.

<div class="card mb-3" data-sort="0">
    <div class="card-header">
        Tekstveld
        <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i data-feather="arrow-down" width="16" height="16"></i></button>
    </div>
    <div class="card-body p-0">
        <div id="editor"></div>
    </div>
</div>

Поскольку я обычно слишком усложняю вещи и получаю результат, который даже не работает, я надеюсь, что вы могли бы помочь мне с простым или более продвинутым рабочим решением для достижения этой цели.

Answer 1

Использование атрибута сортировки данных в качестве индекса сортировки может быть более полезным для "глобальной" сортировки или фильтрации. Например, когда мы нажимаем одну кнопку, чтобы отсортировать их все по значению этого свойства.

Но здесь менее сложной альтернативой является использование jQuery методов по умолчанию, таких как: next (), prev (), closest ( ), insertAfter (), insertBefore ()

$( document ).ready(function() {
setButtons();
$(document).on('click', '.sort-down', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.next('.card');
cCard.insertAfter(tCard);
setButtons();
resetSort();
});

$(document).on('click', '.sort-up', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.prev('.card');
cCard.insertBefore(tCard);
setButtons();
resetSort();

});


function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});

}

function setButtons(){
    $('button').show();
    $('.card:first-child  button.sort-up').hide();
    $('.card:last-child  button.sort-down').hide();
}



function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});
}

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card mb-3" data-sort="0">
    <div class="card-header">
        Tekstveld
        <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
        <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>      
    </div>
    <div class="card-body p-0">
        <div class="editor"></div>
    </div>
</div>
<div class="card mb-3" data-sort="1">
    <div class="card-header">
        Voorbeeld
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
        <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>     
    </div>
    <div class="card-body p-0">
        <div class="editor"></div>
    </div>
</div>
<div class="card mb-3" data-sort="2">
    <div class="card-header">
        Lorem ipsum
              <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
        <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>    
    </div>
    <div class="card-body p-0">
        <div class="editor"></div>
    </div>
</div>
</div>

[ОБНОВЛЕНИЕ]: функция setButtons () скрывает нефункциональные кнопки, когда div достигает предела.

Обратите внимание, что я добавил другая функция resetSort () для изменения порядка значений сортировки данных. На всякий случай, вам это нужно для глобальной сортировки.