使用jquery获取元素的索引

时间:2013-11-27 15:43:24

标签: jquery

好吧,我正在使用index()获取元素的当前索引,然后将其与eqgt选择器一起使用以启用和禁用输入。

但是,我相信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>

here is a fiddle with a working and not working demo

3 个答案:

答案 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);
        } 
    });

DEMO

答案 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();