ぼかしオブジェクトのDOMインデックスが見つかりません

Question

私は入力を表形式でレイアウトしています。 ぼかしイベントが発生すると、ぼやけた要素のインデックスを取得します。

私が試してみると、私はいつも-1（見つからない）を得ます。

HTML：

<div class='table'> 
<div class='tr'> 
    <div class='td'> 
    <input type='text' class='gridInput' value='test1'> 
    </div> 
    <div class='td'> 
    <input type='text' class='gridInput' value='test2'> 
    </div> 
    <div class='td'> 
    <input type='text' class='gridInput' value='test2'> 
    </div> 
</div> 
<div class='tr'> 
    <div class='td'> 
    <input type='text' class='gridInput' value='row2 test1'> 
    </div> 
    <div class='td'> 
    <input type='text' class='gridInput' value='row2 test2'> 
    </div> 
    <div class='td'> 
    <input type='text' class='gridInput' value='row2 test2'> 
    </div> 
</div> 

<div id="result"> 
</div> 
</div> 

</div> 
</div> 

スクリプト：

$(document).on("blur",".gridInput",function(){  
    getIndex(this); 
    }); 

function getIndex(obj){ 
    var ndx=$(obj).closest(".tr").index(obj); 

    $("#result").html("index: "+ndx.toString()); 

} 

CSS：後で追加

.table { display: table } 
.tr  { display: table-row } 
.thead { display: table-header-group } 
.tbody { display: table-row-group } 
.tfoot { display: table-footer-group } 
.col  { display: table-column } 
.colgroup { display: table-column-group } 
.td  { 
     display: table-cell; 
     border:1pt solid #f2f2f2; 
     font-size:.8em; 
     word-break:break-all; 
} 
.th  { 
     display: table-cell; 
     font-weight:bold; 
     border:1pt solid #f2f2f2; 
     font-size:.8em; 
     background:#b4d234; 
     position:relative; 
} 

jsfiddle

：

でも、私は合格しない場合

「この」私はまだいつもあなたがインデックスjQueryのメソッドにobjを渡している理由を0

$(document).on("blur",".gridInput",function(){  
    //getIndex(this); 
    $("#result").html($(this).index().toString()); 
    }); 

Answer 1

objが.trの子ではない以下のサンプルコードを試してみて、入力周り<div>があります。だからあなたはobjの親のインデックスを取得する必要があります。

$(document).on("blur", ".gridInput", function() { 
 
    getIndex(this); 
 
}); 
 

 
function getIndex(obj) { 
 
    var ndx = $(obj).parent().index(); 
 
    $("#result").html("index: " + ndx.toString()); 
 
}

.table { 
 
    display: table 
 
} 
 
.tr { 
 
    display: table-row 
 
} 
 
.thead { 
 
    display: table-header-group 
 
} 
 
.tbody { 
 
    display: table-row-group 
 
} 
 
.tfoot { 
 
    display: table-footer-group 
 
} 
 
.col { 
 
    display: table-column 
 
} 
 
.colgroup { 
 
    display: table-column-group 
 
} 
 
.td { 
 
    display: table-cell; 
 
    border: 1pt solid #f2f2f2; 
 
    font-size: .8em; 
 
    word-break: break-all; 
 
} 
 
.th { 
 
    display: table-cell; 
 
    font-weight: bold; 
 
    border: 1pt solid #f2f2f2; 
 
    font-size: .8em; 
 
    background: #b4d234; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='table'> 
 
    <div class='tr'> 
 
    <div class='td'> 
 
     <input type='text' class='gridInput' value='test1'> 
 
    </div> 
 
    <div class='td'> 
 
     <input type='text' class='gridInput' value='test2'> 
 
    </div> 
 
    <div class='td'> 
 
     <input type='text' class='gridInput' value='test2'> 
 
    </div> 
 
    </div> 
 
    <div class='tr'> 
 
    <div class='td'> 
 
     <input type='text' class='gridInput' value='row2 test1'> 
 
    </div> 
 
    <div class='td'> 
 
     <input type='text' class='gridInput' value='row2 test2'> 
 
    </div> 
 
    <div class='td'> 
 
     <input type='text' class='gridInput' value='row2 test2'> 
 
    </div> 
 
    </div> 
 
    Result: 
 
    <div id="result"> 
 
    </div> 
 
</div>

私.trの指標を与える

Answer 2

がわからない得ます。 あなたの関数のために

function getIndex(obj){ 
var ndx=$(obj).closest(".tr").index(); 

$("#result").html("index: "+ndx.toString()); 
}