Call elements inside $(this)?

Question

Possible Duplicate:
How to find an element within an element

Im running a loop to go through each table row. I want to access the elements inside each table row. How do I do this?

Table:

<table>
<tr> <td class="a">x</td> <td class="b">x</td> <td class="c">x</td> </tr>
<tr> <td class="a">x</td> <td class="b">x</td> <td class="c">x</td> </tr>
<tr> <td class="a">x</td> <td class="b">x</td> <td class="c">x</td> </tr>
<tr> <td class="a">x</td> <td class="b">x</td> <td class="c">x</td> </tr>
</table>

Code doesnt work:

$("tr").each(function(index) {

    // get class a text
    $(this + " td.a").text();

    // get class b text
    $(this + " td.b").text();

    // get class c text
    $(this + " td.c").text();

});

Read the API docs. http://api.jquery.com/category/traversing — Matt Ball, May 15 '12 at 15:44
Also, the jQuery API contains all the information you need. Take an hour or two to go through it, it's worthwhile. — Felix Kling, May 15 '12 at 15:46

score 8 · Accepted Answer · answered May 15 '12 at 15:43

8

You can use children method:

$("tr").each(function(index) {

    // get class a text
    var text1 = $(this).children("td.a").text();

    // get class b text
    var text2 = $(this).children("td.b").text();

    // get class c text
    var text2 = $(this).children("td.c").text();

});

answered May 15 '12 at 15:43

VisioN

143,310
32
282
281

I tried this before posting and it didnt work. But now it does!! THANK YOU. – supercoolville May 15 '12 at 15:54
You are welcome :) Be attentive! – VisioN May 15 '12 at 15:54

score 6 · Answer 2 · answered May 15 '12 at 15:44

6

The second parameter of the jQuery function is context:

$("td.a", this).text();

This will find all td.a descendants that fall within this.

answered May 15 '12 at 15:44

Sampson

265,109
74
539
565

score 3 · Answer 3 · answered May 15 '12 at 15:44

3

If you were accessing it "normally" (ie. not with jQuery), you can just get the cells property.

var trs = document.getElementsByTagName('tr'), l = trs.length, i, tds;
for( i=0; i<l; i++) {
    tds = trs[i].cells;
    // do stuff with tds
]

answered May 15 '12 at 15:44

Niet the Dark Absol

320,036
81
464
592

score 3 · Answer 4 · edited May 23 '17 at 12:02

If you need to call $(this) multiple times, you should assign it to a local variable to increase performance. See this post for more information:

$this vs $(this) in jQuery

Finally, you can use .find() for what you are trying to achieve:

$("tr").each(function(index) {

    var $this = $(this);

    // get class a text
    $this.find("td.a").text();

    // get class b text
    $this.find("td.b").text();

    // get class c text
    $this.find("td.c").text();

});

score 1 · Answer 5 · answered May 15 '12 at 15:46

1

$("tr").each(function(index) {

    // get class a text
    $("td.a", this).text();

    // get class b text
    $("td.b", this).text();

    // get class c text
    $("td.c", this).text();

});

answered May 15 '12 at 15:46

The System Restart

2,873
19
28

THANKS I didnt know you could structure it like that!!! – supercoolville May 15 '12 at 15:55

score 0 · Answer 6 · answered May 15 '12 at 15:45

0

$("tr").each(function() {
    var $this = $(this),
        aText = $this.find('.a').text(),
        bText = $this.find('.b').text(),
        cText = $this.find('.c').text();
});

answered May 15 '12 at 15:45

jmar777

38,796
11
66
64

Call elements inside $(this)?

6 Answers6

Linked