CODEWITHSUNDEEP
jquerythishtml
supernoob
supernoob

Reputation: 367

access multiple html data attributes with jQuery 'this'

Ok, the title might be a little confusing. Let me explain.

<div class="book">
    <h3>Name of Book</h3>
    <p>
        <span data-notmobile="Author"></span>Rajesh K. Maurya</p>
    <p>
        <span data-notmobile="Publication"></span>Wiley India</p>
    <p>
        <span data-notmobile="Edition"></span>2011</p>
    <p>
        <span data-notmobile="Branch"></span>Information Technology</p>
    <p>
        <span data-notmobile="Semester"></span>5</p>
</div>

Now I want a way to swap out the content of each span with its data attribute respectively. I tried

$('.book span').html($('.book span').data("notmobile"));

which only changes the inner html to the first attribute ie "Author". For some reason, the 'this' keyword does not work.

I want to do this without giving each span a class of its own.

Upvotes: 0

Views: 834

Answers (3)

gdoron
gdoron

Reputation: 150303

$('.book span').each(function(){
    $(this).html($(this).data("notmobile"));
});

LIVE DEMO

Upvotes: 3

xdazz
xdazz

Reputation: 160923

$('.book span').each(function() {
    var $this = $(this);
    $this.html($this.data('notmobile')); 
});

Upvotes: 1

Rob W
Rob W

Reputation: 349192

$('.book span').data('notmobile') returns the value of the first matching element. Use the following code to get the correct desired effect:

Demo: http://jsfiddle.net/Gezxj/

$('.book span').html(function() {
    return $(this).data("notmobile");
});

Upvotes: 2

Related Questions