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

要理解抛出异常的原因，以及为什么＆＃34; ... unshift不是函数＆＃34;，首先让我们检查$('#container').data('list')是什么。该值来自$('#container').data('list',$('#container').children());中的赋值，这意味着它是一个jQuery对象。因此，众所周知，它具有＆＃34;数组类似于＃34;但它究竟是什么？让我们看看：

＆＃13;

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');

＆＃13;

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

＆＃13;

因此虽然看起来像一个数组，但行为类似于数组，不是数组。

那么怎么来$('x').push === Array.prototype.push？
不知道这背后的设计决策是什么，但我可以推测这是一个基于优化的决策，因为很有意义的是，很多内部操作都需要将新值推送到＆＃34;数组中，例如＆＃34; jQuery对象。使用this.push(..)之类的内容可能会显示性能提升。顺便提一下，slice()是 documented。

由于jQuery().push()不是文档记录的函数，因此它应该用于将来的证明代码，因为在将来的版本中可能会更改。

您将如何解决问题？
简单！使用真正的阵列！

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

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

（fixed fiddle）

<小时/>

铊; DR

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

在儿童名单前面的未移位元素

1 个答案:

铊; DR