how to use $(this) with foreach in javascript using jquery

Question

I am working on a personal project in Javascript to allow people to create a table of "dream plays" in Scrabble. Here is the link: http://psyadam.neoclaw.net/tables8.html

I am currently trying to allow the user to edit a dream play.

Here is my code:

function editRow(e)
{
    var eventEl = e.srcElement || e.target, 
    parent = eventEl.parentNode
    parent = parent.parentNode
    var test = $(parent.cells[0]).text()
    $('tr').each(function(){
        $(this).children("td:contains(test)").each(
            function()
            {
                pageEnd.innerHTML += "success"
                $(this).addClass('selected')
            }
        )
    })
    pageEnd.innerHTML += test
    //pageEnd.innerHTML += $(parent.cells[3]).text()
    insertRow()
}

// insertRow assumes that the correct row in the table has the "selected" class added to it
function insertRow()
{
    var Row = $('<tr>').append(
        $('<td>').append('<input id="input1">'),
        $('<td>').append('<select id="input2"><option value=""></option><option value="Yes">Yes</option><option value="No">No</option></select>'),
        $('<td>').append('<select id="input3"><option value=""></option><option value="Natural">Natural</option><option value="1 Blank Used">1 Blank Used</option><option value="2 Blanks Used">2 Blanks Used</option></select>'),
        $('<td>').append('<select id="input4"><option value=""></option><option value="vs Computer">vs Computer</option><option value="Online Game">Online Game</option><option value="Friendly Game">Friendly Game</option><option value="Club Game">Club Game</option><option value="Tournament Game">Tournament Game</option></select>'),
        $('<td>').append('<input id="input5">')
    )
    $("#myTable tr.selected").after(Row)
}

Right now I'm just trying to get my code to insert a row into the table. I am trying to do this by using the code $(this).addClass('selected') to tag the row the user selected and then use it in my insert function to insert a row. However, nothing seems to happen. I am using pageEnd.innerHTML += "success" as a debugging tool to see if it is even getting there. Unexpectedly, it prints success twice when it should only print once, as in the test I ran every word was unique.

In any case I can't figure out why it's not working. Any help is appreciated. Thanks, ~Adam

Answer 1

Try this:

function editRow(e) {
    var eventEl = e.srcElement || e.target, 
    parent = eventEl.parentNode
    parent = parent.parentNode
    var test = $(parent.cells[0]).text()
    $('tr').each(function(){

        var outerThis = this;

        outerThis.children("td:contains(test)").each(
            function()
            {
                pageEnd.innerHTML += "success";

                $(this).children().css('text-align', 'center');
            }
        )
    })
    pageEnd.innerHTML += test
    //pageEnd.innerHTML += $(parent.cells[3]).text()
    insertRow()
}

I set the outer this to a variable which you can use. Also textAlign is not a jQuery function. You need to use .css() and then specify text-align in that.

Answer 2

You have two options to achieve this:

The first one as the others are suggesting ie by keeping a variable of outer this and then using this:

$('tr').each(function() {

     var outerThis = this;
     // inside another loop (not sure about children method, just an example)
     $(outerThis).children("td:contains(test)").each(function() {
          // do something with outerThis to operate on further
     });
});

Another option to use Javascript's bind() method:

$('tr').each(function(i, trElement) {
     // this == trElement

     // inside another loop
     $(outerThis).children("td:contains(test)").each(function(index, tdElement) {
          $(this) // will be now tr element
          $(tdElement) // will be td element
     }.bind(this));
});