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

兄弟姐妹（）在元素的上下都查找同一级别的所有元素。 nextAll查找元素下面的所有元素，但同样在同一级别。

我认为你的标记不支持使用这些方法来查找下一个元素。您可能必须使用其他内容或更改标记以支持这些方法。

使用Jquery如何在当前选择的输入元素之后选择所有输入文本元素？

2 个答案: