Javascript 带上/下箭头的jQuery排序卡

我在一个页面上使用引导卡，我希望使用上下箭头对这些卡进行排序。每张卡片的标题都有箭头，可以在布局中上下移动。但当然，当它移动到顶部时，向上箭头应该消失，当它到达底部时也是如此

我尝试过以这种方式使用if语句：

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

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

其中$card是包含正在移动的完整卡的div。 例如，我的完整下移代码块

$(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>

---

由于我通常会使事情变得过于复杂，结果甚至不起作用，我希望您能帮助我找到一个简单或更高级的解决方案来完成这项工作。

使用数据排序属性作为排序索引可能对全局排序或筛选更有用。就像我们点击一个按钮，根据属性值对它们进行排序一样

但在这里，一个不太复杂的替代方法是使用jQuery默认方法，如：next、prev、nest、insertAfter、insertBefore

$document.readyfunction{ 挫折； $document.on'click'，'sort down'，function e{ var cCard=$this.closest'.card'； var tCard=cCard.next'.card'； cCard.insertAftertCard； 挫折； 重新排序； }; $document.on'click'，'sort up'，函数E{ var cCard=$this.closest'.card'； var tCard=cCard.prev'.card'； cCard.insertBeforetCard； 挫折； 重新排序； }; 函数重置排序{ var i=0； $'.card'.eachfunction{ //$this.data'sort'，i； $this.attrdata-sort，i； i++； }; } 功能设置按钮{ $‘按钮’。显示； $'.card:第一个子按钮。排序。隐藏； $'.card:最后一个子按钮.排序'.hide； } 函数重置排序{ var i=0； $'.card'.eachfunction{ //$this.data'sort'，i； $this.attrdata-sort，i； i++； }; } }; 特克斯特维德 沃尔贝尔德 乱数假文

---

你看过JQueryUI的分类表了吗？预期的不是全局排序。。。这是一种上移下移。。。对吧？好吧，我刚通过小提琴测试。。。但是您是否希望保持全局排序成为可能。我的意思是，应该切换这些数据排序值，以保持用于全局排序的正确顺序？？这太棒了！我知道我把事情搞得太复杂了。我必须做的唯一更改是使用first of type和last of type，而不是：first child/：last child。因为某些原因，这些对我来说不起作用。非常感谢。我将保留数据排序，不是为了排序，而是为了在我的请求中轻松访问这些属性，这样我就可以将顺序保存到数据库中。当然，也可以不使用，但更容易使用：我尝试在数据排序上使用带条件检查的切换，但它也需要在相反的按钮上进行切换。有点像一个双重检查组合切换来恢复隐藏的按钮。。。但这仍然是一个不必要的复杂问题：很高兴它起了作用