Jquery chaining selector question

Question

Hi,

I have a table that is generated dynamically. And a click event on a button in one of the rows. I need to get the values of the labels with classes 'label1' and 'label2' in the row that the button is clicked. here is example html:

<table>
<tbody>
    <tr>
        <td><label class="label1">test row 1 - label 1</label></td>
        <td><label class="label2">test row 1 - label 2</label></td>
        <td><input type="button" id="btnTest1" class='btn' value="Click me" /></td>
    </tr>
    <tr>
        <td><label class="label1">test row 2 - label 1</label></td>
        <td><label class="label2">test row 2 - label 2</label></td>
        <td><input type="button" id="btnTest2" class='btn' value="Click me" /></td>
    </tr>
</tbody>
</table>

I can get the parent row by doing this: $(this).closest('tr') but then How do I chain that to get the 2 labels in the row thats clicked?

Answer 1

You're looking for all the children of the current <tr> except for the last one:

$(this).parent().parent().children(':not(:last)')

Final EDIT:

$(this).closest('tr').children(':not(:last)').children('label')

Answer 2

To get the labels, do this:

$(this).closest('tr').find('label');

Not sure what you mean by the values of the labels, but if you want the text of the labels in an array, you can do this:

var array = $(this).closest('tr').find('label').map(function() {
    return $(this).text();
}).get();

Answer 3

$(this).closest('tr').find('.label1, .label2');

or if you're sure, there won't be any unneeded labels:

$(this).closest('tr').find('label');

Answer 4

$(this).parent().parent().find('.label1').html()

Would give you the value of the string content in the label1 class. Depending on what you want to do you may end up iterating through something more like this:

$(this).parent().parent().find('.label1,.label2').each()