Change variable attribute name

Question

I want to change attribute names with variables. However, I can't wrap my head around how to access just the constant. In the following example, I want to change all attribute names starting with "monkey" and change them to "banana", but leave the dashes and numbers unchanged.

Change the following:

<div monkey-20="delicious" monkey-100="delicious">

To this:

<div banana-20="delicious" banana-100="delicious">

Anyone have tips?

$('div').attr('banana-20', $('div').attr('monkey-20')); $('div').removeAttr('monkey-20');? — putvande
– putvande, Commented Apr 8, 2014 at 22:56
I recommend using the html5 data attribute instead. eg <div data-banana-20="delicious" data-banana-100="delicious"></div> — John
– John, Commented Apr 8, 2014 at 22:56
@putvande methods can be chained to avoid useless dom traversal .. var $div = $('div'); $div.each(function(){var t = $(this); t.attr('banana-20', (t.attr('monkey-20') || '')).removeAttr('monkey-20');}); — Stphane
– Stphane, Commented Apr 8, 2014 at 23:03
I should have mentioned: there are going to be cases where there are multiple attributes with varying numbers. I want to change all attribute names starting with "monkey" and change them to "banana", but leave the dashes and numbers unchanged. — Marc P
– Marc P, Commented Apr 9, 2014 at 0:51
Do you need to use Attributes or can you add Child elements like <div data-cat="monkey" data-num="20" data-val="delicious"/> to your div? — collapsar
– collapsar, Commented Apr 9, 2014 at 1:06

WynandB · Accepted Answer · 2014-04-09 02:24:05Z

1

I could argue that your specific requirement to change attribute names is somewhat unusual, so a somewhat unorthodox solution in the form of a jQuery plug-in might work for you:

$.fn.renameAttrs = function() {
  var oldName = arguments[0] + '-',
      newName = arguments[1] + '-';

  return this.each(function() {
    var $node = $(this),
        attrs = [];

    $.each(this.attributes, function() {
      var index = this.name.indexOf(oldName);

      if (!index) {
        $node.attr(newName + this.name.substr(oldName.length), this.value);
        attrs.push(this);
      }
    });

    $.each(attrs, function() {
      $node.removeAttr(this.name);
    });
  });
};

answered Apr 9, 2014 at 2:24

WynandB

1,42716 silver badges16 bronze badges

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

2 Comments

Marc P Over a year ago

Your argument is totally valid: unfortunately, the project is very specific, so your solution may actually be perfect for its requirements! I've added the function but am I calling it correctly in this example: play.meyouand.us/140409-renameattr/rename-attr1.html

WynandB Over a year ago

@MarcP Yes you are, but in that example you'll need to call the plug-in function on DOM ready, e.g. $(function() { $('div').renameAttrs('monkey', 'banana'); });

Collectives™ on Stack Overflow

Change variable attribute name

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related