Question

我对jQuery及其用法有足够的了解但是今天我遇到了使用jQuery获取th table元素内匹配标签的列索引的麻烦。我希望th元素的索引为label文字为移动。在这种情况下，索引应为2。我得到的是实际索引，但这不是正确的方法。所以我想知道为什么jQuery没有使用index()方法给我正确的索引。

我也为此写了JS Fiddler。

的jQuery

var elem = $('#tbl th');
var rIndex;
alert('Length : ' + elem.length);
var index = elem.filter(
    function(index){
        var labelText = $(this).find('label').text();        
        //alert(index + ' - ' + labelText);
        var result = labelText == 'Mobile';
        if (result)
            rIndex = index;
        return result;
    }).index();
alert("jQuery Index : " + index);
alert("Actual Index : " + rIndex);

HTML

<table id="tbl">
    <tr>
        <td></td>
        <th><label>Application No.</label></th>
        <td></td>
        <th><label>Name</label></th>
        <td></td>
        <th><label>Mobile</label></th>
        <td></td>
        <th><label>Gender</label></th>
    </tr>
</table>

Answer 1

如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

这将为您提供真实的索引的 DEMO

elem.each(function(){ if( $(this).find('label').text()=='Mobile') { alert(elem.index(this)); } });

Answer 2

您可以将rowIndex用于行索引和事件对象以获取cellIndex。

this.rowIndex //for row index
e.toElement.cellIndex //for column index

下面的小提琴

Fiddle Link

Answer 3

对于一些参考：

$('input').blur(function() {
    var total_qty = 0;
    var $td = $(this).closest('td');
    var col = $td.parent().children("td").index($td);
    $('table tbody tr').each(function() {
        var $td = $(this).find('td:eq('+col+')');
        var qty = $td.find('input').val();
        if(qty != '') total_qty += qty;
    });
    console.log(total_qty);
});

Answer 4

$('#tbl').find('th').each(function($index){
    if($(this).children('label').html() == 'Mobile')
        alert($index);
})

Answer 5

“如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。”

来源http://api.jquery.com/index/

下面是一个如何使用index（）来实现您正在寻找的结果的示例。请注意我在您希望索引的列中添加了一个id，以使示例更简单，您可以随意选择。

<table id="tbl">
    <tr>
        <td></td>
        <th><label>Application No.</label></th>
        <td></td>
        <th><label>Name</label></th>
        <td></td>
        <th id="mobile"><label>Mobile</label></th>
        <td></td>
        <th><label>Gender</label></th>
    </tr>
</table>

var elem = $('#tbl th');
var rIndex;
alert('Length : ' + elem.length);
var index = elem.filter(
    function(index){
        var labelText = $(this).find('label').text();        
        //alert(index + ' - ' + labelText);
        var result = labelText == 'Mobile';
        if (result)
            rIndex = index;
        return result;
    }).index();
alert("jQuery Index : " + index);
alert("Actual Index : " + rIndex);


correctIndex = $('th').index($('#mobile'))

alert("Used correctly :" + correctIndex);

Answer 6

Index函数根据您提供的列表返回索引。在这种情况下，过滤器的结果。

希望这有帮助

Answer 7

一种简单的方法是在td上使用.prevAll（），然后在其父tr上使用：

var row = $td.closest('tr').prevAll().length;
var col = $td.prevAll().length;

（$td being the td elem you are checking）

演示： http://jsfiddle.net/g5s0ex20/2/

Answer 8

$('table th').each(function(i){
    if($($(this).find('label')).html() == "Name"{
       console.log("position= " + i); return false;
    }
});

如何使用jQuery获取表列索引？

8 个答案: