如何将属性分配给jQuery对象？

It is in my understanding that referencing any DOM element in jQuery via the dollar sign (like this: $("#mydiv")), returns an object.

据我所知,通过美元符号引用jQuery中的任何DOM元素(如:$(“#mydiv”)),返回一个对象。

I am looking to add an additional property to an object as such:

我希望为对象添加一个额外的属性:

$("#mydiv").myprop = "some value";

but this does not seem to work. I am trying to store a value in this object so I can reference it later.

但这似乎不起作用。我试图在这个对象中存储一个值,以便稍后引用它。

The following code, though, gives me an undefined value even immediately after I set the property.

但是,下面的代码在设置属性后立即给出了一个未定义的值。

$("#mydiv").myprop = "some value";
alert($("#mydiv").myprop);

this code does not work either:

此代码也不起作用:

$("#mydiv")["myprop"] = "some value";
alert($("#mydiv").myprop);

Is there a way to achieve this? Or do I need to store all my properties as attributes on the DOM object via $("#mydiv").attr("myprop", "some value") (this is much less desirable).

有没有办法实现这个目标?或者我是否需要通过$(“#mydiv”)。attr(“myprop”,“some value”)将所有属性作为属性存储在DOM对象上(这是不太理想的)。

Thanks!

3 个解决方案

#1

jQuery exposes the concept of a property-bag with the data method.

jQuery使用data方法公开了property-bag的概念。

// set some arbitrary data
$('#selector').data('example-property', exampleValue);

// get the value later
var theValue = $('#selector').data('example-property')

This avoids DOM manipulations which can be expensive in terms of performance.

这避免了DOM操作,这在性能方面可能是昂贵的。

#2

The $ function creates a jquery object that represent a dom element. You can change the attributes of the object, but those changes won't be made aparent in the element it "represents" unless jquery knows what to do with them (assigning a click event handler perhaps).

$函数创建一个表示dom元素的jquery对象。您可以更改对象的属性,但这些更改不会在它“代表”的元素中变得明显,除非jquery知道如何处理它们(也许可以指定单击事件处理程序)。

So when you make the first selection, it modifies the object you made, but doesn't do anything to the actual html element. When you run $ again, it creates a SEPARATE object, that does not retain the attribute change you made to the first.

因此,当您进行第一次选择时,它会修改您创建的对象,但不会对实际的html元素执行任何操作。当您再次运行$时,它会创建一个SEPARATE对象,该对象不会保留您对第一个进行的属性更改。

you may be able to make a direct change to an html object: (without jquery)

您可能能够直接更改html对象:(没有jquery)

getElementByID("theid").myprop = "hello world";

getElementByID(“theid”)。myprop =“hello world”;

resulting in: <p id="theid" myprop="hello world"></p> but setting an attribute of a jquery object just won't do it. To get the equivalent effect in jquery, use the .data method that Ken Browning suggested. (too late again...) :D

导致:

但是设置jquery对象的属性不会这样做。要在jquery中获得等效效果,请使用Ken Browning建议的.data方法。 (太迟了......):D

#3

I'm not sure wether or not this is due to a change in jQuery. But I've done it pretty much as described in the question...

我不确定这是否是由于jQuery的变化。但我已经完成了问题所描述的......

var domElem = $('#selector');
domElem.myProp = "Hello world";

Now in my case I have to use this object in a method call later on:

现在在我的情况下,我必须在稍后的方法调用中使用此对象:

<span onclick=\"SelectAll(domElem)\">Click me!</span>

The method can then do like this:

然后该方法可以这样做:

function SelectAll(domElm){
    alert(domElm.myProp);
}

As I said - it might be an update in the jQuery engine, but it seems that the .data() call is no longer needed :-)

正如我所说 - 它可能是jQuery引擎中的更新,但似乎不再需要.data()调用:-)

#1