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

稍后添加：

即使我没有通过＆＃34;这个＆＃34;我仍然总是0

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

Answer 1

不确定为什么要将obj传递给索引jQuery方法。为您的函数尝试以下代码示例

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

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

Answer 2

obj不是.tr的孩子，输入周围有<div>。因此，您需要获取obj的父级索引。

＆＃13;

$(document).on("blur", ".gridInput", function() {
  getIndex(this);
});

function getIndex(obj) {
  var ndx = $(obj).parent().index();
  $("#result").html("index: " + ndx.toString());
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

无法找到模糊对象的

2 个答案: