jQuery looping with .each and using selectors with $(this)

Question

I'm currently having to extend an very old ASP.NET site which has a database generated front end and is a behemoth of an application, it needs completely rewriting - however I've been told to add to it than redevelop it - rats!

Okay the backend renders the following table on the front end:

<table id="tableID">
<tr>
    <td class="qCol">
    <!-- Label here -->
    </td>

    <td class="qCo2">
    <!-- img here -->
    <!-- and a text box -->
    </td>

    <td class="qCo3">
    <!-- select menu here -->
    </td>

    <td class="qCo4">
    <!-- radio buttons here -->
    </td>

    <td class="qCo5">
    <!-- select menu here -->
    </td>

    <td class="qCo6">
    <!-- hidden validation image here -->
    </td>
<tr>
</table>

Now (Please don't ask why) I have to overwrite content of the td with the class "qCol" with the contents of the td with the class "qCo5".

This is a pretty easy affair using jQuery:

$('#tableID td.qCol').html($('#tableID td.aCo5').html());

Now I've amended the backend so more rows are generated for the table, none of these rows have an id and I need to do this HTML overwrite between the tds for each row (there will be 4 rows in total).

I know how to do this using JavaScript and a bit of looping but I want to get into the habit of using jQuery to do this, incorporating the .each() method.

I'm confused how I'd use "this" and then select the appropriate td, for example...

$('#tableID tr').each(function () {
      $(this).find('td .qCol').html($(this).find('td.aCo5').html());
});

What's the best way to do this?

If this question is poorly explained please say so and I'll expand

$('#tableID tr').each(function () { $(this).children('.qCol').html($(this).siblings('.aCo5').html()); }); — rickyduck, Jul 27 '11 at 09:31
actually saying that it may be: $('#tableID tr').each(function () { $(this).children('.qCol').html($(this).children('.aCo5').html()); }); — rickyduck, Jul 27 '11 at 09:31
[More than you ever wanted to know about `this`](http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-javascript-object-literal/134149#134149) should hopefully help clarify what `this` is — andyb, Jul 27 '11 at 09:34
@Mark Sandman - Your suggestion should work fine, although you may want to remove the space between `td` and `.qCol` in the first `find` (I'm assuming it was just a typo). — James Allardice, Jul 27 '11 at 09:34
@rickyduck - It would be the 2nd example. `this` will still refer to the current `tr` element inside the `html` method, so `siblings` will not work. — James Allardice, Jul 27 '11 at 09:35
So are there many tables (without `id`s) that you always want to repalce `td.qCol` with `td.qCo5`? — andyb, Jul 27 '11 at 09:38
Thanks for your comments, they've worked a treat - now how do I award the points for comments? — Mark Sandman, Jul 27 '11 at 09:40
Press the up button :) @James Allardice, thought so... only this if inside a function.. long day! — rickyduck, Jul 27 '11 at 09:47
You do not get points for comments; only answers. Although there is a [badge](http://stackoverflow.com/badges/94/pundit) for up-voted comments :-) — andyb, Jul 27 '11 at 09:54

score 1 · Answer 1 · answered Jul 27 '11 at 09:47

1

This will replace the qCol with qCo5 for any <table>

$('table tr td.qCol').each(function () {
    var qCo5 = $(this).nextAll('td.qCo5');
    $(this).html(qCo5.html());
});

The main selector just grabs all the td.qCol elements and then uses .nextAll() to find the corresponding td.qCo5 sibling in the same <table> and copies the contents to $(this) which in this context is td.qCol.

answered Jul 27 '11 at 09:47

andyb

43,435
12
121
150

a much more efficient method. – rickyduck Jul 27 '11 at 09:58

score 0 · Answer 2 · answered Jul 27 '11 at 09:33

0

You could do:

$('#tableID tr').each(function () {
      $(this).children('td.qCol').html($(this).children('td.qCo5').html());
});

answered Jul 27 '11 at 09:33

Nicola Peluchetti

76,206
31
145
192

score 0 · Answer 3 · answered Jul 27 '11 at 09:48

0

The jQuery each() function allows you to do it a bit differently, without the this. Like so:

$('#tableID tr').each(function (i, row) {
    var row = $(row);
    row.find('td .qCol').html(row.find('td.aCo5').html());
});

answered Jul 27 '11 at 09:48

zatatatata

4,761
1
20
41

score 0 · Accepted Answer · answered Jul 27 '11 at 09:55

0

$('#tableID tr').each(function () {    
    $(this).children('.qCol').html($(this).children('.aCo5').html()); 
});

As an answer ;)

answered Jul 27 '11 at 09:55

rickyduck

4,030
14
58
93

jQuery looping with .each and using selectors with $(this)

4 Answers4