Question

我有两组元素：

＆＃13;

$('div').on('click', function() {
  $('#h2').after(this);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="h1">header 1</h2>
<div id="item45" data-time="07:00">item45</div>
<div id="item12" data-time="09:00">item12</div>
<div id="item33" data-time="14:30">item33</div>
<div id="item43" data-time="19:00">item43</div>

<h2 id="h2">header 2</h2>
<div id="item7" data-time="09:00">item7</div>
<div id="item13" data-time="14:00">item13</div>
<div id="item22" data-time="17:30">item22</div>
<div id="item35" data-time="22:00">item35</div>

＆＃13;

我需要将元素从 标题1 下的第一个组移动到 标题2 使用jQuery。

移动并不困难，但项目必须符合时间顺序，基于数据时间属性。

例如，如果我移动＃item33，则必须将它放在＃item13和＃item22之间。不确定我是如何以编程方式执行此操作的：

$('#item33').after('#item13);

另外，如果我要移动＃item45，它必须是.before（＆＃39;＃item7＆＃39;）。

Answer 1

可以使用nextAll()和filter()来确定插入点

var $item = $('#item33'),
    itemTime = $('#item33').data('time')
var $nextList = $('#h2').nextAll();

// filter items based on time being greater 
$nextList.filter(function() {
    return $(this).data('time') >= itemTime;
 // insert before the first one
}).first().before($item);

如果没有大于或等于被移动的逻辑，则需要一些额外的逻辑

的 DEMO

以编程方式选择正确的放置

1 个答案: