使用Jquery，如何在當前選擇的輸入元素之后選擇所有輸入文本元素？

Question

我一直在嘗試使用nextAll（）和siblings（），但是那些函數從不返回任何東西，我只能假定它與嵌套在其他html元素（表單元格）中的表單輸入有關。

// 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") );
});

所以我想獲得當前所選元素之后的所有同級元素

更新：所以這將在我的特定情況下工作-請參閱下面的答案$(this).parent().parent().nextAll().find('input')...

但這是我為使頁面正常工作所要做的

$("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() );
    } 
});

有沒有辦法像我那樣做？ 一種選擇元素的方式（更快/更好）是否比另一種方式更受青睞？

Answer 1

如果輸入位於<td>包裝器內，則需要先獲取父級<td>然后獲取所有下一個同級<td> ，然后遍歷它們：

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

嘗試在要查找的元素周圍加上邊框，您將知道JQuery是否在確認它們。

測試用例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>

測試用例CSS：

.red {
    border:2px solid red;
}

測試用例JQuery：

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

測試案例演示： http : //jsfiddle.net/AlienWebguy/EnYdd/

Answer 2

Siblings（）在元素的上和下都在同一級別上查找所有元素。 nextAll在該元素下查找所有元素，但仍在同一級別。

我認為您的標記不支持使用這些方法來查找下一個元素。 您可能必須使用其他方法或更改標記以支持這些方法。