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

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

如果你想保留元素的状态，你必须明确地做到这一点。例如，如果 "something" 是一个<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)"
  }
}