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?

Improve this question
2
  • What version of jQuery are you using? It works for me; jsfiddle.net/enpdh Commented Jul 17, 2012 at 15:27
  • 2
    @Matt you've got it backwards. This is the scenario: jsfiddle.net/mattball/Bf9yv Commented Jul 17, 2012 at 15:31

4 Answers 4

Reset to default
1

Use data attributes to both set and get the data:

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

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

Documentation

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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);
Improve this answer

Comments

0

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

alert($("#Browse").prop('isOpen'));
Improve this answer

4 Comments

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.
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.
@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.
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 :)
-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

Improve this answer

9 Comments

Wow, someone must be pissed. Care to share why all the answers got downvoted?
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 " 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.
@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)
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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.