Используя 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

Братья и сестры () ищут все элементы на одном уровне как вверх, так и вниз по элементу.nextAll ищет все элементы под элементом, но снова на том же уровне.

Я думаю, что ваша разметка не поддерживает использование этих методов для поиска следующих элементов.Возможно, вам придется использовать что-то другое или изменить разметку для поддержки этих методов.