将元素存储在数组中，然后在jquery中使用它

var els = []; els.push($("#something")); 

我需要将它添加到数组中，因为#something的属性将被更改，我需要获取它的原始属性（高度，宽度位置等）

我现在如何使用els数组中的元素？

Answer 1

如果只需要几个属性，我不会存储整个对象。

 $something = $('#something'); els[$something.attr('id')] = { width: $something.width(), height: $something.height(), offset: $something.offset() }; console.log(els['something']); 

Answer 2

好吧，使用保存的jQuery对象，你只需使用普通的数组索引：

 els[0].css("backgroundColor", "purple"); 

现在，您说要保存该jQuery对象以保留其状态。 那不行; jQuery对象只是一个包装器，它提供对选择器选择的DOM元素的访问。 但是，它不会复制或保留DOM的状态。 如果DOM发生更改，那么这些更改将由该jQuery对象反映，并且旧属性值将不可用。

如果要保留元素的状态，则必须明确地执行此操作。 例如，如果“something”是 ，则可以保存其值：

 var savedValue = $('#something').val(); 

如果要将属性保存到数组：

 var els = []; els.push({ height: $('#something').height(), width: $('#something').width(), position: $('#something').position() }); 

这将推送一个全新的对象（ 不是 jQuery对象;只是一个具有属性的普通对象）来捕获您的DOM状态。

现在你已经获得了“value”属性的副本，后续的DOM更新不会改变它。

Answer 3

您可以根据需要向数组添加任意数量的对象，然后使用数组索引执行操作或从每个对象获取值。

 var els = []; els.push($("#something")) .push($("#something-else")) .push($("#another")) .push($("#mydiv")) ; 

……像这样：

 els[0].width(); els[1].css('height'); els[2].css('width','300px'); els[3].position(); els.each(function(){ // Do stuff } 

您基本上就像将jquery对象保存为变量一样，并且您可以对数组对它的引用执行您可能对该变量（或直接在jquery选择上）执行的任何相同操作。

Answer 4

如果你真的想要存储“元素”及其“css”的副本，以便你拥有所有可用的东西，那么你需要做这样的事情。 （POJS和jquery中的示例）

CSS

 #target { position: relative; top: 100px; left: 150px; height: 50px; width: 70px; } 

HTML

 
Text 

使用Javascript

 // IE5+ support function snapshot(node) { var computedStyle = {}, style = {}, prop; if (typeof document.defaultView.getComputedStyle === "function") { computedStyle = document.defaultView.getComputedStyle(node, null); } else if (node.currentStyle) { computedStyle = node.currentStyle; } else { throw new Error("Unable to get a computed style."); } for (prop in computedStyle) { if (computedStyle.hasOwnProperty(prop)) { style[prop] = computedStyle[prop]; } } return { node: node.cloneNode(true), style: style } } // Whatever jquery supports $.fn.snapshot = function () { var node = this.get(0), computedStyle = {}, style = {}, prop; if (typeof document.defaultView.getComputedStyle === "function") { computedStyle = document.defaultView.getComputedStyle(node, null); } else if (node.currentStyle) { computedStyle = node.currentStyle; } else { throw new Error("Unable to get a computed style."); } for (prop in computedStyle) { if (computedStyle.hasOwnProperty(prop)) { style[prop] = this.css(prop); } } return { node: this.clone(true), style: style } } var snap1 = snapshot(document.getElementById("target")), snap2 = $("#target").snapshot(); console.log(snap1, snap2); 

在jsfiddle

另一方面，如果你真正想要的是边界客户矩形信息。 然后你可以做这样的事情。

CSS

 #target { position: relative; top: 100px; left: 150px; height: 50px; width: 70px; } 

HTML

 
Text 

使用Javascript

 // IE5+ support var getBoundingClientRect = (function () { // Gecko < 1.9.1 test var test = document.body.getBoundingClientRect(); // Gecko < 1.9.1 if (!test.hasOwnProperty("height") || !test.hasOwnProperty("width")) { return function (node) { var rect = target.getBoundingClientRect(); rect.height = rect.bottom - rect.top; rect.width = rect.right - rect.left; return rect; }; } // Gecko >= 1.9.1 return function (node) { return target.getBoundingClientRect(); }; }()); // Whatever jquery supports $.fn.getBoundingClientRect = function () { var offset = this.offset(), height = this.height(), width =this.width(), rect = { width: width, height: height, top: offset.top, left: offset.left, bottom: offset.top + height, right: offset.left + width }; return rect; } var rect1 = getBoundingClientRect(document.getElementById("target")), rect2 = $("#target").getBoundingClientRect(); console.log(rect1, rect2); 

在jsfiddle

我现在如何使用els数组中的元素？

使用标准Array方法访问存储在els的各个元素。

还有一些jquery方法可用，具体取决于你想要做什么，例如循环jQuery.each

你对这些信息“想要做什么”取决于你，你没有在你的问题中指明。

Answer 5

您正在尝试创建jQuery对象的静态副本。 这显然是不可能的（或者很难做到）。 您应该只保存对象的重要属性： {value: something.val()}

当然，您可以为此创建function。

 function xyz (Element, List) { // in List you can use form 'val' for methods without arguments and ['attr', 'argument'] // for others. // eg. ['val', ['attr', 'id'], ['css', 'height']] Element = $(Element); // to be sure it's jQuery Object var InfoList = {}, i, it, MethodName, MethodArg; for (i = 0; i < List.length; i++) { it = List[i]; if (typeof it === 'object') { MethodName = it[0]; MethodArg = it[1]; if(!InfoList[MethodName]) InfoList[MethodName] = {}; InfoList[MethodName][MethodArg] = Element[MethodName](MethodArg); } else if (typeof it === 'string') { InfoList[it] = Element[it]; } else { console.log('O.o'); } } return InfoList; } 

输出示例（我用过）： JSON.stringify(xyz($('#hlogo'), ['html', ['attr', 'id'], 'height', ['css', 'color']]))

 { "html": "\n \n Stack Overflow\n <\/a>\n ", "attr": { "id": "hlogo" }, "height": 61, "css": { "color": "rgb(0, 0, 0)" } }