javascript - 是否可以修改 jquery 对象并检索修改后的对象

Question

我正在尝试修改 $('#some_id') 生成的对象，一切似乎都工作正常，但是当我询问修改后的对象时，它根本没有任何变化。

$('#log_container').log
undefined
$('#log_container').log = {}
Object {}
$('#log_container').log
undefined

为什么 $('#log_container').log 是 undefined 而不是我在上一行中明确分配的内容？

Answer 1

因为jQuery('some-selector')每次调用时都会返回一个新对象:

function whatHappens(selector) {
  return {
    magic: 'here'
  }
}

whatHappens('when').log  // undefined
var result = whatHappens('when');
result.log = {};
var result2 = whatHappens('when');
result === result2  // false
result.log   // {}
result2.log  // undefined

如果您需要一些数据始终在对象上可用，您可以:

• 使用data设置DOM节点数据的方法:

  $('#log_container').data('log', {});
  $('#log_container').data('log');
  

• 存储对 jQuery 集合的引用:

  var $logContainer = $('#log_container');
  $logContainer.log = {};
  $logContainer.log;  // {}
  

• 更新返回的 jQuery 集合的 [[Prototype]](jQuery.prototype，通常由其别名 jQuery.fn 引用) code>) 添加数据/方法(这使得数据可用于所有 jQuery 集合，过去、现在和 future ):

  jQuery.fn.log = function yourLoggingMethod() {
    // Available on all jQuery collections now
    // Shared state - don't put things like {} or []
    // on here unless you intend to have a mutable "global".
  };
  

  然后您就可以像平常一样创建集合:

  var $logContainer = $('#log_container');
  $logContainer.log  // function yourLoggingMethod