Retrieve text within an attribute using jQuery?

Question

For starts I have this HTML with example data within it:

<div class="card {toggle:'someinformation'}">               
    <div class="off"></div>                 
    <div class="on {toggle:'getThisInfo'}"></div>
</div>

I want to use jQuery and retrieve this information. Upon asking someone they told me to use the follow (which did not work):

    var $card = $(this);
    var this_card = $card.children(".on").metadata()["toggle"];

and was told the value of "this_card" would be 'getThisInfo' -- which it did not work. And yes, I did make sure metadata was included in HTML and jQuery as well.

Any other suggestions?

jQuery doesn't have a metadata() method. Are you using this plugin: github.com/jquery-orphans/jquery-metadata — Barmar
– Barmar, Commented Sep 8, 2013 at 23:05
That looks like a templating language, maybe you should include all the information in your question ? — adeneo
– adeneo, Commented Sep 8, 2013 at 23:06

Joe · Accepted Answer · 2013-09-08 23:35:35Z

3

Just use the HTML5 data-* attribute:

<div class="card" data-toggle="someinformation">               
    <div class="off"></div>                 
    <div class="on" data-toggle="getThisInfo"></div>
</div>

Then access it using jQuery's .data() function, like this:

var $card = $(this),
    this_card = $card.children(".on").data("toggle"); // "getThisInfo"

Update:

Based on the extra code posted this should work perfectly for you:

var $on_cards = $(".card > .on:visible");
if ($on_cards.length == 2) {
    var $card = $('.card:first'), // was $(this), replaced just for this demo
        this_card = $card.children(".on").data("toggle"),
        $matched_cards = $on_cards.filter('[data-toggle="' + this_card + '"]'),
        event_name = "no_match";
    if ($matched_cards.length === 2) {
        event_name = "found_match";
    }
}

This uses jQuery's Attribute Equals Selector to find .on elements with the same data-toggle value.

Important: if you need to change the .on's value then don't use jQuery's .data() function to do so, use:

$(selector).attr('data-toggle','your-new-value');

This is because .attr() and .prop() update the attributes in the HTML (which the [data-toggle=""] selector checks) whereas .data() updates an internal jQuery object without affecting the actual element.

Here it is working: http://jsfiddle.net/c4fQ3/1/ (try changing the .on element's data-toggle value)

edited Sep 8, 2013 at 23:35

answered Sep 8, 2013 at 23:01

Joe

15.6k8 gold badges51 silver badges57 bronze badges

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

10 Comments

biziclop Over a year ago

And for extra JSON fun: "When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. If the value isn't parseable as a JavaScript value, it is left as a string."

Arbitrary Over a year ago

Thank you so much Joe, but say this is for a matching game and I wanted to check how many times the data occurs between the two cards would I simply do "this_card.length == 2" ?

Joe Over a year ago

@Arbitrary - no problem. Are there two instances of .card or would you just be comparing the data of .off and .on?

Arbitrary Over a year ago

There would be two instances of ".card"

Joe Over a year ago

@Arbitrary - I've just added a solution for you. I've checked it in the fiddle and it should solve your problem!

|

Collectives™ on Stack Overflow

Retrieve text within an attribute using jQuery?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related