Question

如果我有以下结构：

<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？

Answer 1

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

＆＃13;

var $elements = $('#elements').children(),
    $elementAt1 = $elements.eq(1);

$elements.filter('[data-id=4]').insertBefore($elementAt1);

＆＃13;

#elements > div:before { content: attr(data-id) }

＆＃13;

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

＆＃13;

Answer 2

只需将div[data-id="4"]移到第1位

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

Working Demo

如果您的div与div [data-id =＆＃34; 5＆＃34;]是第一个div，那么以前的代码可以正常工作..如果不使用此代码

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

Working Demo

使用jQuery在DOM中移动元素

2 个答案: