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

#something のプロパティが変更され、元のプロパティ (高さ、幅の位置など) を取得する必要があるため、これを配列に追加する必要があります。

els 配列内の要素を使用するにはどうすればよいですか?

4

5 に答える 5

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 の状態がキャプチャされます。

これで、「値」プロパティのコピーが得られました。その後の DOM の更新では、それが変更されることはありません。

于 2013-07-07T14:29:01.010 に答える
1

「要素」とその「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

情報に対して「やりたいこと」はあなた次第です。質問でそれを指定していません。

于 2013-07-09T14:23:08.360 に答える
0

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;
}

出力の例 (私は th を使用しました): 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)"
  }
}
于 2013-07-07T15:24:08.593 に答える