Question

var collection = $('ul li');
collection.each(function (index) {
    var test = $.extend($(this), {
    // var test = $.extend(collection.eq(index), {
        someProperty: 'val'
    });
    console.log(test.someProperty);
});
console.log(collection.eq(0).someProperty);

测试：http://jsfiddle.net/simo/G3yCr/1/

我正在尝试在jquery集合中扩展每个对象。我想直接从集合中的每个项目访问属性。

问题是为什么collection.eq(index)对象不会被扩展。注释行是替代的，并给出相同的结果。

规范：http://api.jquery.com/jQuery.extend/

Answer 1

在.each函数this中指的是集合中的各个DOM元素，而不是jQuery对象。

然后当你调用$(this)时，你正在创建一个 new jQuery对象，它不是集合中的那个。

使这个附加属性保持不变的最简单方法是将其添加到元素本身。或者，使用.data()来存储和检索其他属性。

在ES5浏览器上，您可以使用（可能令人讨厌的）黑客攻击来使.data()看起来像一个不动产：

(function($) {
    Object.defineProperty($.fn, 'foo', {
        get: function() {
            return $(this).data('foo');
        },
        set: function(v) {
            $(this).data('foo', v);
        }
    });
})(jQuery);

$('#d1').foo = 'bar';
$('#d2').foo = 'wot';

alert([$('#d1').foo, $('#d2').foo]);

请注意，（AFAIK）没有其他jQuery代码在jQuery对象上添加属性（.length)除外）。使用此技巧可能会使其他开发人员感到困惑。

Answer 2

简单。请阅读jQuery Plugin Authoring：

$.fn.someProperty = 'val';
var collection = $('ul li');
console.log(collection.eq(0).someProperty);

不需要遍历整个集合。

jQuery扩展 - 目标对象不会被扩展

2 个答案: