String to jQuery object, replace attribute and then back to string again (see JS Fiddle)

Question

This should replace all classes with the corresponding data-change attribute.

So if I had:

<div class="hello" data-change="new-class">

...I would expect it to return

<div class="new-class" data-change="new-class">

My code changes one of them (the one on the button) but not the other.

What am I doing wrong?

Thanks for any help.

--

Apparently I need to post the JS Fiddle code too:

var str = '<div class="original-class" data-change="new-class">Hello</div><div class="class-123"><input type="button" class="start-class" data-change="any-new-class" value="Click Me"></div>';

var html = $('<div/>').html(str).contents();

$('[data-change]', html).attr('class', function() { return $(this).data('change') });

alert( $(html).parent().html() );

Ram · Accepted Answer · 2013-03-07 19:51:14Z

2

var html = $('<div/>').html(str).find('[data-change]').attr('class', function () {
    return $(this).data('change');
}).end().html();

alert(html);

http://jsfiddle.net/n8zMN/

answered Mar 7, 2013 at 19:51

Ram

145k16 gold badges174 silver badges201 bronze badges

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

1 Comment

user2143356 Over a year ago

Perfect. If only I could up-vote (and post comments without waiting 15 seconds apart).

karaxuna · Accepted Answer · 2013-03-07 19:57:56Z

1

try this:

$('[data-change]', html).attr('class', function() { return $(this).attr('data-change') });

EDIT:

var html = $(str);
html.filter('[data-change]').attr('class', function() { return $(this).data('change') });

I think it works: http://jsfiddle.net/r4KL9/2/

edited Mar 7, 2013 at 19:57

answered Mar 7, 2013 at 19:49

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

1 Comment

user2143356 Over a year ago

Thanks, I ended up trying the other answer which worked, but I think yours looks good too.

Collectives™ on Stack Overflow

String to jQuery object, replace attribute and then back to string again (see JS Fiddle)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related