0

I have a function attached to the div #Browse's click event that toggles a variable isOpen to true or false. Another click event has the following statements

alert($("#Browse").attr('isOpen'));
alert(document.getElementById('Browse').isOpen);

The first one yields "undefined" while the second one says true or false and is correct. How can I get the value of isOpen using jQuery?

Chris Baker
  • 49,926
  • 12
  • 96
  • 115
user974896
  • 1,795
  • 4
  • 28
  • 48

4 Answers4

1

Use data attributes to both set and get the data:

// to set
$("#Browse").data('isOpen', true)

// to get
$("#Browse").data('isOpen')

Documentation

Chris Baker
  • 49,926
  • 12
  • 96
  • 115
1

There is no "jQuery way" to do this, because isOpen is an ad-hoc property. If you are able to change how the property is set, follow the recommendations in Chris' answer.

Otherwise, the closest you can get is to use jQuery to get the DOM element, and then unwrap it:

alert($("#Browse")[0].isOpen);
Community
  • 1
  • 1
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
0

With new versions of jQuery, you need to use .prop to get this.

alert($("#Browse").prop('isOpen'));
gen_Eric
  • 223,194
  • 41
  • 299
  • 337
  • Is there any kind of documentation on this? Because it works and it seems like the most jQueryish and elegant solution available, only I cannot see anything in the doc about Properties on DOM elements being read by jQuery this way. – Beat Richartz Jul 17 '12 at 15:38
  • That's exactly what I'm talking about, they only use `prop` in the documentation with actual html attributes, and not with custom values. But I will have a look at the source code. – Beat Richartz Jul 17 '12 at 15:52
  • @BeatRichartz: `As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.` I read that meaning that `.prop` can read custom properties too. – gen_Eric Jul 17 '12 at 15:54
  • Argh. "they only use prop in the documentation with actual html attributes" -- because you should only use it with valid properties. Again, data attributes are how to do this. Check out the docs, check out the specification, read about best practice :) – Chris Baker Jul 17 '12 at 15:56
-1

To get access to the dom element in jQuery, you have to get the element by its index in the jQuery collection: With an id, there's hopefully only one element in your collection, so you can use get(0)

$('#Browse').get(0).isOpen;

For more convinient setting of attributes on jQuery elements, just use the data method

Beat Richartz
  • 9,474
  • 1
  • 33
  • 50
  • 1
    Wow, someone must be pissed. Care to share why all the answers got downvoted? – Beat Richartz Jul 17 '12 at 15:30
  • I didn't downvote. I like your way best. This isOpen is set by a recursive function call bound to the click event. It is set using this.isOpen = true. Since the generated elements are not tracked by IDs I can not use data. – user974896 Jul 17 '12 at 15:34
  • 1
    @user974896 _" Since the generated elements are not tracked by IDs I can not use data"_ is simply not true. All you need to do is change `this.isOpen = true` to `$(this).data('isOpen', true)`, and use Chris' answer. – Matt Ball Jul 17 '12 at 15:35
  • @user974896 I suggested using the data method too. It's the best way to store data with jQuery objects. (if you cannot use a simple variable) – Beat Richartz Jul 17 '12 at 15:37
  • @user974896 just an FYI, this is exactly equivalent to my answer: for jQuery objects, `$foo.get(index)` is the same as `$foo[index]` (but more verbose `;-)`. – Matt Ball Jul 17 '12 at 15:41
  • 1
    I didn't -1, but I will: this is bad practice. You're setting arbitrary properties on volatile host objects. The data attributes exist exactly so you **don't** do this. – Chris Baker Jul 17 '12 at 15:55
  • @Chris Please check [the implementation of `data`](https://github.com/jquery/jquery/blob/master/src/data.js) before [advocating for and against using expando attributes](http://stackoverflow.com/questions/1915341/whats-wrong-with-adding-properties-to-dom-element-objects). What `data` actually does is map an expando attribute to `$.cache` internal global variable. It is therefore the same way setting an arbitrary property on a volatile host object. What I agree upon is that an attribute `isOpen` is *too* arbitrary and an underscore should be prefixed, but that was not the question. – Beat Richartz Jul 17 '12 at 16:42
  • @BeatRichartz - I am quite aware of the current implementation, and you'll find that regardless of the jQuery library's implementation, data attributes are a part of the specification and [are considered the best option going forward](http://ejohn.org/blog/html-5-data-attributes/). But thanks for revenge down-voting my correct answer, lol. – Chris Baker Jul 17 '12 at 19:41
  • @Chris [I did not downvote your answer, I'm the one upvoting it](http://imgur.com/OBow9). As you know the HTML5 data implementation is not equal to jQuery's data attribute implementation at the moment. But you're right assuming the jQuery team will improve their implementation when time has come. Apart from that, let's face it: neither of our answers feature warnings or explanations about expando or why an unaware user best uses the `data` attribute. Let's leave it at that. – Beat Richartz Jul 18 '12 at 07:09