CODEWITHSUNDEEP
jquery
Mark Sandman
Mark Sandman

Reputation: 3333

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

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

Upvotes: 1

Views: 119

Answers (4)

rickyduck
rickyduck

Reputation: 4084

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

As an answer ;)

Upvotes: 0

zatatatata
zatatatata

Reputation: 4821

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());
});

Upvotes: 0

andyb
andyb

Reputation: 43823

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.

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could do:

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

Upvotes: 0

Related Questions