使用 Jquery 移动 <div> 时，insertAfter() 有效，但 insertBefore() 无效

Question

我正在使用 Jquery 在 DOM 中移动元素。我可以单击顶部的向下箭头（塑料卡）并向下移动，但我无法单击底部的向上箭头（插入纸）并向上移动。它什么也不做。 DOM 中根本没有任何动作。奇怪的。为什么？

Jquery 函数本质上是彼此的反映。我想他们都应该按照各自的意图工作。

HTML 代码：

        <div class="item">
            <div class="item_detail" style="display:flex;">
                <div class="item_trigger">
                    <a href="#" class="" style="display:inline;" title="Item"><img class="item_image" src="~/Content/Images/item.svg" /></a>
                    <h3 style="font-size: 16px; width:70%; display:inline;">Insert with Plastic Card</h3>
                </div>
                <div class="actions" style="color:white; ">
                    <a id="btnAddNewComponent" class="actionBtn">
                        <img class="selector" style="" src="~/Content/Images/component.svg" title="Add New Component" />
                    </a>
                    <a id="btnEdit" class="actionBtn">
                        <img class="selector" style="" src="~/Content/Images/edit.svg" title="Edit Selected Item" />
                    </a>
                    <a id="btnUp" class="actionBtn">
                        <img class="selector" style="" src="~/Content/Images/up-arrow.svg" title="Move Selected Item Up" />
                    </a>
                    <a id="btnDown" class="actionBtn">
                        <img class="selector" style="" src="~/Content/Images/down-arrow.svg" title="Move Selected Item Down" />
                    </a>
                    <a id="btnTrash" class="actionBtn">
                        <img class="selector" style="" src="~/Content/Images/delete.svg" title="Delete Selected Item" />
                    </a>
                </div>
                <div class="plusMinusIcon">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </div>
            </div>

            <div class="component component_trigger" style="margin-bottom:10px; display:none; padding-top:0; padding-left:0;">
                <a href="#" class="" style="display:inline; border-radius:5px; padding:4px;"><img class="component_image" src="~/Content/Images/component.svg" /></a>
                <h2 style="font-size: 14px; display:inline;">Paper Insert</h2>
                <div class="componentActions" style="color:white; float:right;">
                    <a id="btnEdit" class="actionBtn">
                        <img class="btnComponentEdit" style="" src="~/Content/Images/edit.svg" title="Edit Selected Item" />
                    </a>
                    <a id="btnUp" class="actionBtn">
                        <img class="btnComponentUp" style="" src="~/Content/Images/up-arrow.svg" title="Move Selected Item Up" />
                    </a>
                    <a id="btnDown" class="actionBtn">
                        <img class="btnComponentDown" style="" src="~/Content/Images/down-arrow.svg" title="Move Selected Item Down" />
                    </a>
                    <a id="btnTrash" class="actionBtn">
                        <img class="btnComponentTrash" style="" src="~/Content/Images/delete.svg" title="Delete Selected Item" />
                    </a>
                </div>
            </div>

            <div class="component component_trigger" style="margin-bottom:10px; display:none; padding-top:0; padding-left:0;">
                <a href="#" class="" style="display:inline; border-radius:5px; padding:4px;"><img class="component_image" src="~/Content/Images/component.svg" /></a>
                <h2 style="font-size: 14px; display:inline;">Plastic Card</h2>
                <div class="componentActions" style="color:white; float:right;">
                    <a id="btnEdit" class="actionBtn">
                        <img class="btnComponentEdit" style="" src="~/Content/Images/edit.svg" title="Edit Selected Item" />
                    </a>
                    <a id="btnUp" class="actionBtn">
                        <img class="btnComponentUp" style="" src="~/Content/Images/up-arrow.svg" title="Move Selected Item Up" />
                    </a>
                    <a id="btnDown" class="actionBtn">
                        <img class="btnComponentDown" style="" src="~/Content/Images/down-arrow.svg" title="Move Selected Item Down" />
                    </a>
                    <a id="btnTrash" class="actionBtn">
                        <img class="btnComponentTrash" style="" src="~/Content/Images/delete.svg" title="Delete Selected Item" />
                    </a>
                </div>
            </div>
        </div>

JQuery:

$(document).on('click', '.btnComponentDown', function () {
    var componentSelected = $(this).parent().parent().parent();
    var currentParentItem = $(this).parent().parent().parent().parent();
    $(componentSelected).next().insertAfter($(componentSelected).prev());
    $(currentParentItem).children().last('.component').children().children('.componentActions a[id=btnDown]').css('display', 'none');
    $(currentParentItem).children().last('.component').children().children('.componentActions a[id=btnUp]').css('display', 'block');
    $(currentParentItem).children('.component').first().children('.componentActions').children('a[id=btnUp]').css('display', 'none');
    $(currentParentItem).children('.component').first().children('.componentActions').children('a[id=btnDown]').css('display', 'block');
});

$(document).on('click', '.btnComponentUp', function () {
    var componentSelected = $(this).parent().parent().parent();
    var currentParentItem = $(this).parent().parent().parent().parent();
    $(componentSelected).prev().insertBefore($(componentSelected).next());
    $(currentParentItem).children().last('.component').children().children('.componentActions a[id=btnDown]').css('display', 'none');
    $(currentParentItem).children().last('.component').children().children('.componentActions a[id=btnUp]').css('display', 'block');
    $(currentParentItem).children('.component').first().children('.componentActions').children('a[id=btnUp]').css('display', 'none');
    $(currentParentItem).children('.component').first().children('.componentActions').children('a[id=btnDown]').css('display', 'block');
});

Answer 1

我发现insertBefore 和insertAfter 函数的另一种格式。那确实有效。我正在使用：

$(componentSelected).prev().insertBefore($(componentSelected).next());

我改成：

$(componentSelected).insertBefore($(componentSelected).prev('.component'));

我的 insertAfter() 代码正好相反。我改变了：

$(componentSelected).next().insertAfter($(componentSelected).prev());

到：

$(componentSelected).insertAfter($(componentSelected).next('.component'));

参考：https://api.jquery.com/insertBefore/

This line opened my eyes:  $( "**\<p>Test\</p>**" ).insertBefore( "**.inner**" );

显然，您将 HTML 放在指令的第一部分，将目标放在指令的第二部分。