好吧,我正在使用index()
获取元素的当前索引,然后将其与eq
和gt
选择器一起使用以启用和禁用输入。
但是,我相信index()
只能通过搜索兄弟元素来工作。所以,就像我的html结构现在一样,索引并没有帮助我。我怎样才能做到这一点?
var $cascade = $(".cascade-discount-2"); // switch to 1
$("input", $cascade).on("keyup", function(){
var $this = $(this);
index = $this.index();
if($.isNumeric($this.val())){
$("input", $cascade).eq(index+1).attr("disabled", false);
}else{
$("input:gt("+index+")", $cascade).attr("disabled", true);
}
});
无效的html结构:
<div class='sep cascade-discount-1'>
<div class='bla'>
<input type="text" placeholder="0" />
</div>
<div class='bla'>
<input type="text" placeholder="0" disabled='disabled'/>
</div>
<div class='bla'>
<input type="text" placeholder="0" disabled='disabled'/>
</div>
答案 0 :(得分:2)
您编写的代码适合第二种DOM
结构,因为所有这些input
元素都是siblings
彼此。但是在DOM
的第一个结构中,您只是将所有input
个元素包含在另一个div
中。这样您的代码将始终返回0
。
试试这个,
var $cascade = $(".cascade-discount-1");
$("input", $cascade).on("keyup", function(){
var $this = $(this);
index = $(this).closest('div').index();
if($.isNumeric($this.val())){
$("input", $cascade).eq(index+1).attr("disabled", false);
}else{
$("input:gt("+index+")", $cascade).attr("disabled", true);
}
});
答案 1 :(得分:1)
.index()的无参数变量将是元素的索引与其兄弟姐妹相关,在您的情况下,所有输入元素都是其父元素的第一个子元素。
但是还有第二个变量采用了参数
如果在元素集合和DOM元素上调用.index()或 传入jQuery对象,.index()返回一个指示的整数 传递元素相对于原始集合的位置。
var $cascade = $(".cascade-discount-1"),
$inputs = $cascade.find('input'); // switch to 1
$inputs.on("keyup", function () {
var $this = $(this);
index = $inputs.index(this);
if ($.isNumeric($this.val())) {
$("input", $cascade).eq(index + 1).attr("disabled", false);
} else {
$("input:gt(" + index + ")", $cascade).attr("disabled", true);
}
});
演示:Fiddle
答案 2 :(得分:0)
检查父元素的索引可能会有所帮助:
index = $this.parent().index();