jQuery each loop to rename every instance of an ID

问题

I have a page that is creating dynamically created rows in a table with an input with an ID "fixedRate"

I am trying to rename each instance of the fixedRate id. This is only working for the first instance of the id with my current code.

Here is the code:

var amountRows = $("#billTasks > tr").size();
var i=1;


$("#fixedRate").each(function(){

if (i == amountRows) {
    return false; 
}
    this.id = this.id + i;
    i++;
});

The way I think the code should work is adding a 1,2,3,... at the end of the word fixedRate for each instance of the fixedRate ID. (i.e. fixedRate1, fixedRate2,...)

Do I need to use a while loop? I have tried many different things including a while loop and have managed to crash my browser over and over. So now I am looking for your help!

thanks!!!

回答1:

Identifiers are mainly for singling out elements, if you want a wide group. I suggest you convert the id into a class such as

<a class="test"></a>

Then you can access all elements by using the selector

$(".test") // gathers all elements that contain that class

also if you want to enumerate all the elements you can use the each function with two parameters in the callback

$.each($(".test"), function(a,b){
//a is the index
//b is the element
b.attr("id", a); // to set each element id to their index
});

回答2:

When using the id selector, jQuery only returns the first instance.

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM.

http://api.jquery.com/id-selector/

Since only one element is returned, your each loop only runs once.

You have two possible solutions. You can either update the logic in your script that is automatically generating the fixedRate id so that it generates unique ids or you can have that script set a class of fixedRate instead of an id. You can then loop through each class and assign a unique id to it.

$(".fixedRate").each(function(i) {
    var row = $(this)
    row.attr('id', 'fixedRate' + i);
});

回答3:

This will not work, you either have to have unique IDs in the first place.
Or instead of having id="fixedRate", make it class="fixedRate" and use $(".fixedRate") instead.
Posted a sample jsfiddle http://jsfiddle.net/playerace/L4szw/ , and take notice that alert only comes out once.

回答4:

Try this:

$(".fixedRate").each(function(i){
    var $this = $(this)
    $this.attr('id','fixedRate' + i);
});

You dont need to look out for the amount of rows.

And use a class to call all the rates and then assign a id.

回答5:

You could perhaps try using something akin to:

$('tbody tr[id^="fixedRate"]').each(
    function(i){
        this.id = 'fixedRate' + i;
    });

JS Fiddle demo.

来源：https://stackoverflow.com/questions/6974328/jquery-each-loop-to-rename-every-instance-of-an-id

标签

jquery

each