使用jQuery移动DOM中的元素

Move elements in DOM using jQuery

本文关键字：元素 DOM jQuery 移动 使用      更新时间：2023-09-26

如果我有以下结构：

<div id="elements">
    <div data-id="5"></div>
    <div data-id="3"></div>
    <div data-id="1"></div>
    <div data-id="4"></div>
    <div data-id="0"></div>
</div>

我不知道如何编写函数，我可以说"数据id为4的元素位于位置1"。所以在我得到结果之后：

<div id="elements">
    <div data-id="5"></div>
    <div data-id="4"></div>
    <div data-id="3"></div>
    <div data-id="1"></div>
    <div data-id="0"></div>
</div>

是否可以使用jQuery？

如果要将元素移动到特定位置，可以使用.eq(index)将元素移到所需位置，然后使用.insertBefore($element)将<div>放置到位。

var $elements = $('#elements').children(),
    $elementAt1 = $elements.eq(1);
$elements.filter('[data-id=4]').insertBefore($elementAt1);
#elements > div:before { content: attr(data-id) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="elements">
    <div data-id="5"></div>
    <div data-id="3"></div>
    <div data-id="1"></div>
    <div data-id="4"></div>
    <div data-id="0"></div>
</div>

仅将div[data-id="4"]移动到位置1

$('div[data-id="4"]').insertAfter('div[data-id="5"]');

工作演示

无论如何，如果带有div[data id="5"]的div是第一个div，那么前面的代码就可以工作。。如果不使用此代码

$('div[data-id="4"]').insertAfter('#elements > div[data-id]:eq(0)');

工作演示

相关文章：