如何在HTML元素属性上存储jquery对象？

Question

I have a <select> form element where I create multiple <option> children based on looping through a jQuery array of objects.

I want to store each jQuery associated with an <option> on the <option> itself, I guess as a property. So that when I get the change event fired I can pull out the jQuery object which the <option> was based on.

I thought I could just set it using attr, serializing the object into JSON, but its not working. Any ideas?

Here is some code:

// creating the select: (data is a jquery array of objects)
    $(data).each(function() {
        var opt = $('<option></option>').val(this[id_property]).html(this[label_property]);
        // preserve the original jquery object on this <option> element:
        opt.attr('json', JSON.stringify(this));
        $(select).append(opt);
    });

// bind the onchange event, and try to recreate that original jquery object
    $(select).bind('change', function(event) {
        // this gives me a ref to the <option> element:
        var val = $(select).find(":selected");
        // now how to get the original jquery object?
        var item = $(val).attr('json');        
    });

I want that last line setting var item to the original jquery object - or somehow recreate it. I even tried doing an eval() passing in item since it is JSON formatted but it throws an error.

Answer 1

您可以利用jQuery中的data()方法，这可能会为您带来最有利的结果，并且使您能够避免不必要的自定义序列化。