Question

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对象中，并且旧属性值将不可用。

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

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

<div id="target">Text</div>

的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

<div id="target">Text</div>

的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 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                <a href=\"\/\">\n                    Stack Overflow\n                <\/a>\n            ",
  "attr": {
    "id": "hlogo"
  },
  "height": 61,
  "css": {
    "color": "rgb(0, 0, 0)"
  }
}

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

5 个答案: