Can't get the siblings value within a html table with jQuery

Question

I have a 5 x 5 table. Each cell is an asp.net textbox. I want to get al the 5 textbox values of the last row with a non empty textbox. For example:

This should get HELL O MY FRIE ND

But I get all the values BUT the last (ND). I don't know why. Here's my code:

// RIGHT HERE, $(this) referes to the whole table
$(this).find('input[value!=""]')
        // I get the last edited textbox
        .last()
        // Go up to the parent <td>
        .parent('td')
        .siblings('td')
        // I get all my brothers of type input 
        .children(':input')
        .each(function () {
            alert($(this).val());
        });

I am doing something wrong but what? thank you.

Answer 1

You should use parents() and search for the tr and then all input inside it:

$(this).find('input[value!=""]')
       .last()
       .parents('tr')
       .find('input')
       .each(function () {
           alert($(this).val());
        });

Answer 2

You could use something like this..

$(this).find('input[value!=""]:last')
       .parents("tr:first")
       .find(":text")
       .each(...);

Answer 3

You should do something like this

$(this).find('tr').filter(function() { // find all trs
    // returns the row if all inputs are filled  
    return $(this).find('input').filter(function() {
        return $(this).val().length > 0
    }).length == 5; // check to make sure row has 5 unempty textboxes
}).last() // get the last tr returned with no empty textboxes
.find('input').each(function() { // find inputs
    console.log($(this).val());
});​

http://jsfiddle.net/E5hnA/

Your problem lies within you not filtering by row.. but finding the the last unempty textbox.. then traversing starting there

$(this).find('input[value!=""]')  // find all inputs that are not empty
    .last() // get the last one

So what happens when there is an input in the last row that has an unempty textbox? That's the row you are getting. What I'm doing in my example is.

Find all rows > Filter-return the ones that has all inputs filled > get the last one in the returned collection > then do whatever - Since now you have the last row with all inputs filled

Answer 4

The problem lies when you call .siblings() - that returns all other <td> elements that has the same parent as your currently selected <td> element. The problem can be solved by traversing up another step in the DOM and then selecting the children as has been shown by @Adrian, @Quintin Robinson, @Sushanth --, and @wirey.

I figured that I would post an answer so you would have an explanation since all other answers solved your problem but didn't explain what was wrong. And now here is how I would change your code :)

$(this).find('input[value!=""]:last')
    .parents('tr')
    .find('td input')
    .each(function () {
        alert($(this).val());
    });

Answer 5

Try this

$(this).find('input[value!=""]')

        .closest('tr')
        .prev('tr')
        .children(':input')
        .each(function () {
            alert($(this).val());
        });