jquery获取另一个元素中父元素的索引

时间:2014-04-20 17:48:45

标签: jquery dom jquery-traversing

我在表格单元格中列出了一系列输入,例如电子表格。我只是想让jquery在我开始输入时找出他们所在的列。我想在没有在列本身中添加标识符的情况下这样做。

http://jsfiddle.net/jx3FP/

我使用jquery的索引进行了几次尝试,但我显然错过了一些东西。当我尝试获取表数据的索引(td)时,我得到的是文档,而不是它的父文件。当我尝试指定父母和孩子时,它似乎不是索引所做的事情。提前感谢您的帮助。

$('tr td input').live('keyup',function(e){
    /* attempt 1, returns nth td in document instead of the nth td in the table row
    var column = $(this).parent().index('td');
    $('#column').val(column);
    */
    /* attempt two */
    $parentRow = $(this).parents('tr');
    $parentCell = $(this).parent('td');
    var $column = $(this).parent('td').index('tr');
    // insert column number into #column
    var $column = ($parentRow).index($parentCell);
    $('#column').val($column);
});

2 个答案:

答案 0 :(得分:0)

您正在寻找closest,而不是parentparents

var cellThisInputIsIn = $(this).closest('td');
var theCellsIndexWithinTheRow = cellThisInputIsIn.index();
var rowThisInputIsIn = $(this).closest('td');
var theRowsIndexWithinTheTableBody = rowThisInputIsIn.index();

一旦你拥有它/它们,你不清楚你想要对单元格/行和/或它们的索引做什么,但这就是你如何找到它/它们。

答案 1 :(得分:0)

jsfiddle:http://jsfiddle.net/jx3FP/1/

HTML

<table>
    <tr>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>        
    </tr>
    <tr>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>        
    </tr>    
</table>
<br />
<input id="column" placeholder="column" />
<input id="row" placeholder="row" />

JS

$('tr td input').live('keyup',function(e){
        /* attempt 1, returns nth td in document instead of the nth td in the table row
        var column = $(this).parent().index('td');
        $('#column').val(column);
        */
        /* attempt two */
        var cellThisInputIsIn = $(this).closest('td');
        var rowThisInputIsIn = $(this).closest('tr');
        var $column = cellThisInputIsIn.index();
        var $row = rowThisInputIsIn.index();
        $('#column').val($column);
        $('#row').val($row);
    });