jQuery - Nested Loop Problem

Question

I have a table of input fields where I want to 1)change the first column from an input field to a normal td field (which works) and 2) change the name attribute of the other td fields within the row. (this is related to a previous posting Retrieve an Input fields' name, and then change it but is a different problem).
I want this:

<tr id="row_0" class="dataRow">  
    <td><input type="text" class="tabcell" name="_0-2" value="AFB" /><td>
    <td><input type="text" class="tabcell" name="_0-3" value=7.0 /><td>
    <td><input type="text" class="tabcell" name="_0-7" value=7.6 /></td>  
    ....  
<tr id="row_1" class="dataRow">  
    <td><input type="text" class="tabcell" name="_1-2" value="TANKERS" /><td>

replaced with this:

<tr id="row_0" class="dataRow">
    <td name="resource">AFB</td>
    <td><input type="text" class="tabcell" name="AFB_0-3" value=7.0 /><td>
    <td><input type="text" class="tabcell" name="AFB_0-7" Bvalue=7.6/><td>
    ... 
<tr id="row_1" class="dataRow">
    <td name="resource">TANKERS</td>
    ...

My jQuery code is:

function setRowLabels() {
    var row = [];
    var rowCategory = "";

    $('.dataRow').each(function(i) {
        // get the current resource abbreviation value
        rowCategory = $('td:eq(0) input', this).val();

        // replace the contents of the first column (an input field) with a td field
        $('td:eq(0)', this).replaceWith('<td name="resource">' + rowCategory + '</td>');

        var colName = "";
        // for each input field .... 
        $('input', this).each(function(j) {
            // get the current name
            currName = $('input').attr('name');
            $('input').attr('name', rowCategory + currName);
        });
    });
}

But that is returning:

<tr id="row_0" class="dataRow">
    <td name="resource">AFB</td>
    <td><input type="text" class="tabcell" name="...TANKERSAFBAFBAFBAFBAFBAFBAFBAFB" value=7.0 /><td>
    <td><input type="text" class="tabcell" name="...TANKERSAFBAFBAFBAFBAFBAFBAFBAFB" Bvalue=7.6/><td>

So it repeats the name/label from column 1 multiple times, plus the name/label from every other row.
Once again, any help/pointers are welcome.

Vic

jigfox · Accepted Answer · 2010-07-22 20:25:11Z

1

Try to replace $('input') with $(this) in your inner loop.

$('input') returns every input and not only the current one.

function setRowLabels() {
    var row = [];
    var rowCategory = "";

    $('.dataRow').each(function(i) {
        // get the current resource abbreviation value
        rowCategory = $('td:eq(0) input', this).val();

        // replace the contents of the first column (an input field) with a td field
        $('td:eq(0)', this).replaceWith('<td name="resource">' + rowCategory + '</td>');

        var colName = "";
        // for each input field .... 
        $('input', this).each(function(j) {
            // get the current name
            currName = $(this).attr('name');
            //         ^^^^^^^^ $('input') calls every input and not only the current one.
            $(this).attr('name', rowCategory + currName);
            //^^^^
        });
    });
}

edited Jul 22, 2010 at 20:25

answered Jul 22, 2010 at 18:58

jigfox

18.2k3 gold badges62 silver badges74 bronze badges

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

4 Comments

Vic Over a year ago

Hmmm, I get the same results as before: name="...TANKERSAFBAFBAFBAFBAFBAFBAFBAFB" ....

jigfox Over a year ago

Sorry, but you need to change it at two places! I've updated my answer

Vic Over a year ago

Thanks Jens, that worked. And I'm beginning to better understand how jQuery works. $('input') refers to every input, whereas $(this). refers to just the current input within the loop. Vic

CaffGeek Over a year ago

@Vic, just remember, instead of $(this), you can use function(i, element) and then have the element in the variable element (or whatever you choose to call it). It's how .each works in jQuery. The function is passed both the index, and the object at that index

CaffGeek · Accepted Answer · 2010-07-22 18:59:26Z

1

Change this

    $('input', this).each(function(j) {
        // get the current name
        currName = $('input').attr('name');
        $('input').attr('name', rowCategory + currName);
    });

to this, and you should be closer

    $('input', this).each(function(j, input) {
        // get the current name
        currName = input.attr('name');
        input.attr('name', rowCategory + currName);
    });

$.each passes the index and object into the function, hence, instead of writing function(j) you can have function(j, input) and input will be the element you are looping

answered Jul 22, 2010 at 18:59

CaffGeek

22.2k18 gold badges106 silver badges186 bronze badges

Collectives™ on Stack Overflow

jQuery - Nested Loop Problem

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related