JQuery隐藏元素输入问题遍历
JQuery hidden element input issue traversing
我有一个问题我就是想不明白。我有一组DIV,默认为display: none;
:
<div id="pivot">
<div id="leftcol">Pivot</div>
<div id="rightcol">
<input class="small" value="030-" disabled />
<input class="input" id="pi" maxlength="6" />
<span id="pit"></span>
</div>
</div>
<div id="pos1">
<div id="leftcol">Position 1</div>
<div id="rightcol">
<input class="small" value="031-" disabled />
<input class="input" id="p1" maxlength="6" />
<span id="p1t"></span>
</div>
</div>
<div id="pos2">
<div id="leftcol">Position 2</div>
<div id="rightcol">
<input class="small" value="031-" disabled />
<input class="input" id="p2" maxlength="6" />
<span id="p2t"></span>
</div>
</div>
<div id="pos3">
<div id="leftcol">Position 3</div>
<div id="rightcol">
<input class="small" value="031-" disabled />
<input class="input" id="p3" maxlength="6" />
<span id="p3t"></span>
</div>
</div>
<div id="pos4">
<div id="leftcol">Position 4</div>
<div id="rightcol">
<input class="small" value="031-" disabled />
<input class="input" id="p4" maxlength="6" />
<span id="p4t"></span>
</div>
</div>
<div id="pos5">
<div id="leftcol">Position 5</div>
<div id="rightcol">
<input class="small" value="031-" disabled />
<input class="input" id="p5" maxlength="6" />
<span id="p5t"></span>
</div>
</div>
<div id="pos6">
<div id="leftcol">Position 6</div>
<div id="rightcol">
<input class="small" value="031-" disabled />
<input class="input" id="p6" maxlength="6" />
<span id="p6t"></span>
</div>
</div>
然后下面的代码隐藏相关的部分:
$.ajax({
url: "getSerial.asp",
data: { term: term },
dataType: "json",
success: function(data) {
$('option:selected').append('-' + data[0].sn)
$('#prefix').attr('disabled', true)
var code = data[0].partno.substring(6, 12);
len = code.length;
$('#pivot').show(0);
for (var i = 0; i < len; i++) {
if (code.substr(i, 1) != "-") {
$('#pos' + code.substr(i, 1)).show(0);
}
}
$('div').find('input:enabled').first().focus();
}
});
这很好。然后我要做的是当你输入6个字符时,它会自动跳转到下一个可见的输入(class="input"
)。我的代码非常不迷人,只适用于下一个逻辑div (pos1, pos2等)。组合可能是pos1,pos3,pos3,因此忽略了数字2(因为它仍然是隐藏的)。
$(this).parent('div').parent('div').next('div').find('.input:visible').focus()
这对上述组合不起作用。我如何成功地只遍历到下一个可见的。input类?
在选择器中使用:has()
来匹配包含可见输入的div
$(this).parent('div').parent('div').nextAll('div:has(.input:visible)').first().find('.input:visible').focus();
相关文章:
- 循环遍历以数组为值的Javascript对象
- 遍历类元素数组,并在jquery中选择同级元素
- Jquery遍历表元素
- Chrome扩展:遍历不同的页面并收集数据
- 如何遍历包含对象的数组-javascript
- 遍历 JSON 对象并检查 URL 是否以某个值结尾
- 遍历AngularJs中的对象
- JQuery 遍历当前 SELECT 值
- jQuery-数据提取问题(html遍历)
- Ionic和AngularJS中遍历视图的问题
- Javascript 中 DOM 遍历的第一个子节点问题
- 循环遍历具有空数据的数组列表时出现问题
- JQuery隐藏元素输入问题遍历
- 数组组合以解决遍历问题
- Internet Explorer / MS Edge浏览器在遍历xml数据时出现问题
- 如何遍历一系列问题和答案
- 在遍历json对象时有问题
- 遍历嵌套JavaScript对象和数组时出现问题
- 选择要显示和隐藏的元素,遍历问题!(jQuery)
- 使用DOM遍历表的问题