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

The this inside the nested .each callback is not the same as the one in the outer .each. Also, .children isn't a valid function call. — Alnitak
– Alnitak, Commented Jul 11, 2015 at 19:27
shouldn't you show inputs and dropboxes instead of editing the text alignement — Abdessabour Mtk
– Abdessabour Mtk, Commented Jul 11, 2015 at 19:31
And in the code in your question, $(this).children should be $(this).children() -- everything in jQuery is a function. — Barmar
– Barmar, Commented Jul 11, 2015 at 19:35

Shashank Agrawal · Accepted Answer · 2015-07-11 19:46:38Z

0

You have two options to achieve this:

The first one as the others are suggesting i.e. 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));
});

answered Jul 11, 2015 at 19:46

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

1 Comment

Adam H. Over a year ago

Success! I just had to make sure I had $() around outerThis and also change $(this).addClass('selected') to $(outerThis).addClass('selected'). Thank you for all your help!

Chrillewoodz · Accepted Answer · 2015-07-11 19:40:18Z

0

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.

answered Jul 11, 2015 at 19:40

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

1 Comment

Adam H. Over a year ago

I tried that, and I get this error: TypeError: outerThis.children is not a function outerThis.children("td:contains('" + test + "')").each(

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related