Using Jquery how do I select all input text elements after currently selected input element?

Question

I have been trying to use nextAll() and siblings() but those functions never return anything and I can only presume that it has to do with the form inputs being nested in other html elements (table cells).

// This works like I would expect but obviously returns all the input elements
$("input.tbDate").each( function(index) {
    alert('class selector : Index=' + index + ' id=' +  $(this).attr("id") );
});

// these next ones do not work, I only need elements after currently selected input
$(obj).siblings().each( function(index) {
    alert('sibings() : Index=' + index + ' id=' +  $(this).attr("id") );
});

$(obj).nextAll().each( function(index) {
    alert('nextAll() : Index=' + index + ' id=' +  $(this).attr("id") );
});

So I want to get all of the sibling elements that are after the currently selected element

UPDATE : So this would work in my specific situation - see answer below $(this).parent().parent().nextAll().find('input')...

But this is what I had already done to get my page working

$("input.tbDate").each( function(index) {
    if (endDate != null) 
    {
        if ( $(this).attr("id").indexOf("StartDate") != -1 )
        {
            endDate.setDate( endDate.getDate() + 1);
            var dayOfTheWeek = endDate.getDay();
            if (dayOfTheWeek==6)
            {
                endDate.setDate(endDate.getDate()+2);
            }
            else if (dayOfTheWeek==0)
            {
                endDate.setDate(endDate.getDate()+1);
            } 
        }
        endDateString = endDate.getMonth() + 1 + "/" +  endDate.getDate() + "/" +  endDate.getFullYear();
        $(this).val( endDateString );
    }
    // Found input text box and grabbing
    if ( $(this).attr("id") ==  $(obj).attr("id"))
    {
        endDate = new Date( $(obj).val() );
    } 
});

Is there a gotcha doing it the way I did it? Is one way of selecting elements preferred (faster/better) than another?

Answer 1

If the inputs are inside <td> wrappers you'd need to first grab the parent <td> then grab all the next sibling <td> 's and traverse into them:

$('input.tbDate').parent().nextAll().find('input').css('border','3px solid red');

Try that to put a border around the elements you seek and you'll know if JQuery is acknowledging them.

Test case HTML:

<table>
    <tr>
        <td>
            <input type="text" class="test" />
            <input type="text" class="test" />
            <input type="text" class="test" />
        </td>
        <td>
            <input type="text" class="test" />
            <input type="text" class="test" />
            <input type="text" class="test" />
        </td>
        <td>
            <input type="text" class="test" />
            <input type="text" class="test" />
            <input type="text" class="test" />
        </td>
    </tr>
</table>

Test case CSS:

.red {
    border:2px solid red;
}

Test case JQuery:

$(function(){
    $('.test').click(function(){
        $('.test').removeClass('red');
        $(this).nextAll().addClass('red');
        $(this).parent().nextAll().find('input').addClass('red');
    }); 
});

Test case demo: http://jsfiddle.net/AlienWebguy/EnYdd/

Answer 2

Siblings() look for all the elements at the same level at both up and down the element. nextAll look for all the elements below the element but again at the same level.

I think your markup is not supporting to use these methods to find the next elements. You might have to use something else or change the markup to support these methods.