在孩子列表前面取消移动元素

Question

我有一个函数可以保留 div 的子项列表，以便在它们移动时保持原始顺序

带有孩子的对象是这样构建的：

$('#container').data( 'list', $('#container').children() );

当我将一个孩子附加到这个列表时，我可以使用push：

$('#container').data( 'list' ).push( element );

但是当我尝试像这样在这个列表前面推送一个元素时：

$('#container').data( 'list' ).unshift( element );

我希望element将 推到 前面data('list')，但出现错误：

$(...).data(...).unshift 不是函数

如何在此子列表的开头推送元素？我明白孩子的名单是不是数组，但由于push没有给出问题，出又一功能splice和slice工作得很好我以为我可以处理这个数组。

我制作了一个显示问题的JSFiddle。

Answer 1

要了解为什么会抛出异常，以及为什么“ ...unshift 不是函数”，首先让我们检查一下$('#container').data('list')是什么。这个值来自于赋值$('#container').data('list',$('#container').children());，这意味着它是一个 jQuery 对象。因此，众所周知具有“类似数组”的属性，但它到底是什么？让我们来看看：

var cnsl = $('#console');
function log(s) {
  cnsl.append('<span>'+s+'<span><br/>');
}

var children = $('#container').children();

var res = (children.length !== undefined) ? 'has' : 'doesn\'t have'
log('A jQuery object ' + res + ' a length');
res = (children[1] !== undefined) ? 'can' : 'can\'t';
log('A jQuery object ' + res + ' be addressed by index using square brackets');
res = (children.push !== undefined) ? 'has' : 'doesn\'t have'
log('A jQuery object ' + res + ' a push property');
res = (typeof children.push === 'function') ? 'is' : 'isn\'t'
log('A jQuery object\'s "push" property ' + res + ' a function');
res = (children.push === Array.prototype.push) ? 'is' : 'isn\'t'
log('A jQuery object\'s "push" property ' + res + ' the same function as Array.prototype.push');

res = (children instanceof Array) ? 'is' : '<b>isn\'t</b>'
log('A jQuery object ' + res + ' an instance of Array');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

<div id="console"></div>

所以虽然它看起来像一个数组，行为像一个数组，但它不是一个数组。

那怎么来的$('x').push === Array.prototype.push？
不确定这背后的设计决策是什么，但我可以推测这是一个基于优化的决策，因为内部的许多操作都需要将新值推送到“类似数组”的 jQuery 对象中。使用类似的东西可能会this.push(..)显示性能改进。slice()顺便说一下有 据可查。

由于jQuery().push()不是文档化的功能，它应该用于未来的证明代码，因为这可能会在未来的版本中发生变化。

你会如何解决这个问题？
简单的！使用真正的数组！

$('#container').data( 'list', $('#container').children().get() );

//...
$('#container').data( 'list' ).push( element.get(0) );
$('#container').data( 'list' ).unshift( element.get(0) );

（固定小提琴）

Tl; DR

jQuery 对象不是数组。没有存在的理由jQuery().unshift()。