How to replace name attribute inside of element in JQuery?

Question

I have following issue: I have Jquery element Tournament.player with following data:

<div class="row mb-2">
  <div class="col">
    <input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player3">
  </div>
  <div class="col p_region" style="">
    <select name="players[2][region]" class="form-control">
      <option value="" disabled="" selected="">Choose region</option>
    </select>
  </div>
  <div class="col-2">
    <button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
  </div>
</div>

I want to increment counter in name attribute of inner select and input elements.

That's what I tried so far:

var newPlayer = Tournament.player.clone().find('input, select').attr("name", function(i, name) {
  return name.replace(/(\d+)/, function($0, $1) {
    return +$1 + 1;
  });
});
newPlayer.appendTo(".players");

It does what I need, but returns only select and input elements, like so:

<input name="players[3][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="">
<select name="players[3][region]" class="form-control" disabled="">
  <option value="" disabled="" selected="">Choose region</option>                                                                               
</select>

What I do wrong? I want to get same element that I had before, but getting only part of it.

Big thanks in advance.

Hello! Tournament.player is a variable, that has JQuery element inside (I've provided it in my question). Hope now its clear — Kirill Adamuk
– Kirill Adamuk, Commented Oct 29, 2019 at 15:11
I'm finding it on the page and copy in variable for future use: this.player = $(".player:last").clone() .find("input") .attr({value: ''}) .end(); — Kirill Adamuk
– Kirill Adamuk, Commented Oct 29, 2019 at 15:15

mplungjan · Accepted Answer · 2019-10-29 15:16:31Z

1

You mean this:

const Tournament = {
  player: $(".mb-2")
}

var newPlayer = Tournament.player.clone();
newPlayer.find('input, select').attr("name", function(i, name) {
  return name.replace(/(\d+)/, function($0, $1) {
    return +$1 + 1;
  });
});
newPlayer.find('input').attr("value", function(i, value) {
  return value.replace(/(\d+)/, function($0, $1) {
    return +$1 + 1;
  });
});
newPlayer.appendTo(".players");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="players">
  <div class="row mb-2">
    <div class="col">
      <input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player2">
    </div>
    <div class="col p_region" style="">
      <select name="players[2][region]" class="form-control">
        <option value="" disabled="" selected="">Choose region</option>
      </select>
    </div>
    <div class="col-2">
      <button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
    </div>
  </div>
</div>

answered Oct 29, 2019 at 15:16

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

2 Comments

Kirill Adamuk Over a year ago

Thank you very much, that worked. I guess, there was wrong methods chain in my code!

mplungjan Over a year ago

Yes, you inserted only the found elements

Collectives™ on Stack Overflow

How to replace name attribute inside of element in JQuery?

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