jQuery: I have a class, I'm iterating it with each. The result is different each turn. How to use the this and access the value?

Question

I'm a beginner and this is my first time encountering problem like this.

I'm iterating a class using the each method provided by jQuery. The page have many class with the same name. So we can expect that it may be 15 iterations.

Each iteration have different value.

$(".book").each(function(n) {
    var result = $(this

I have to get the last TD with the value List. So my option is to use

$(".book tbody tr:last")

But I think this thing wouldn't work in the each environment because it won't know which context it is currently processing.

The $(this tbody tr:last) wouldn't work also. How can I devised a selector that will work?

<div class = "book">
    <p class = "chapter">
     <table>
      <tbody>
       <tr>
        <td>General</td>
        <td>
         <b>Buck</b>
        </td>
       </tr>

       <tr>
        <td>General</td>
        <td>List</td>
       </tr>
      </tbody>
     </table>
    </p>
</div>

Answer 1

Assuming the HTML you posted there is a single book and there are many others exactly like it, and you want access to the last <tr> in each one of them, this should work:

$('div.book tbody tr:last-child').each(function() {
    var value = $(this).find('td').eq(1).text();
});

value would then be "List" with the HTML above, and if you have several <div>s it would iterate as you might expect through the last <tr> of each one of them.

The key here is that we are using last-child instead of simply last. The last documentation says that it will match the last selected element; we don't want that. What we want instead is what last-child describes: Matches all elements that are the last child of their parent. This distinction is important in this particular case as we only want the last child of the particular table we're currently in, we don't want the last result overall.

If you wanted the last <td> in each last <tr>, we could even do this:

$('div.book tbody tr:last-child td:last-child').each(function() {
    var value = $(this).text();
});

This selector would select each last child <tr> and select its appropiate last-child <td>. This would be best if you don't care what the value of the first <td> is. If you do then you want to use the first one.

Answer 2

If you're only looping over the tr:last elements, Paolo's answer should work for you. However, if you're need to run more than one query against each div.book, try this instead:

$("div.book").each(function() {
    $("tbody tr:last", this).doStuff();
    $("p.chapter", this).doOtherStuff();
}

The second argument to the dollar function is the "context node" and defaults to document (i.e. it "searches" the entire DOM).