access multiple html data attributes with jQuery 'this'

Question

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.

PS. Where's "this" in your code..?

Rob W
– Rob W

2012-03-25 10:50:52 +00:00
Commented Mar 25, 2012 at 10:50 — Rob W
– Rob W, Commented Mar 25, 2012 at 10:50

gdoron · Accepted Answer · 2012-03-25 11:05:41Z

3

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

LIVE DEMO

edited Mar 25, 2012 at 11:05

answered Mar 25, 2012 at 10:46

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

1 Comment

gdoron Over a year ago

@supernoob. No problem. I added a demo, hope you like it.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

$('.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");
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 25, 2012 at 10:45

Rob W

350k87 gold badges811 silver badges683 bronze badges

1 Comment

gdoron Over a year ago

This fiddle is easy to get. just added css to your fiddle

xdazz · Accepted Answer · 2012-03-25 10:47:13Z

1

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

answered Mar 25, 2012 at 10:47

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

access multiple html data attributes with jQuery 'this'

3 Answers 3

1 Comment

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

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

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

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related