jquery - unshift 子元素列表前面的元素

Question

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

带有子对象的对象是这样构建的:

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

当我将一个子项添加到此列表时，我可以使用push:

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

但是当我尝试将一个元素推到此列表前面时，如下所示:

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

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

$(...).data(...).unshift is not a function

如何将元素插入此子列表的开头？我确实知道子列表不是数组，但由于 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() 顺便说一句是 documented .

由于 jQuery().push() 不是一个记录的函数，因此它应该用于面向 future 的代码，因为在未来的版本中可能会发生变化。

<小时/>

您将如何解决这个问题？
简单的!使用真正的数组!

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

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

( fixed fiddle )

---

Tl;DR

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