[英]Using Jquery how do I select all input text elements after currently selected input element?
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). 我一直在尝试使用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") );
});
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')...
更新:所以这将在我的特定情况下工作-请参阅下面的答案
$(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?
一种选择元素的方式(更快/更好)是否比另一种方式更受青睐?
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: 如果输入位于
<td>
包装器内,则需要先获取父级<td>
然后获取所有下一个同级<td>
,然后遍历它们:
$('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. 尝试在要查找的元素周围加上边框,您将知道JQuery是否在确认它们。
Test case HTML: 测试用例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: 测试用例CSS:
.red {
border:2px solid red;
}
Test case JQuery: 测试用例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/ 测试案例演示: http : //jsfiddle.net/AlienWebguy/EnYdd/
Siblings() look for all the elements at the same level at both up and down the element. Siblings()在元素的上和下都在同一级别上查找所有元素。 nextAll look for all the elements below the element but again at the same level.
nextAll在该元素下查找所有元素,但仍在同一级别。
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.
您可能必须使用其他方法或更改标记以支持这些方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.