Question

我有一系列表格，其中每个人的ID值以相同的字符串结尾，例如

<table id="ctl01_mytable" .../>
<table id="ctl02_mytable" .../>
<table id="ctl03_mytable" .../>

我试图在JQuery中实现以下内容，以确保每个表的第一列的宽度设置为相同的值（所有的最宽的宽度，以便每个表的第一列具有匹配的宽度）

    function matchWidths() {
        var w = 0;
        // find widest cell
        $("table[id$='mytable'] tr td:first").each(function () {
            alert($(this).width()); // debug

            //if ($(this).width() > w) {
            //  w = $(this).width();
            //}

        });
        // set all cells to widest across child tables
        $("table[id$='gv_selfAllocSkills'] tr td:first").each(function () {
            //$(this).width(w);
        });
    }

当我运行上面的代码时，只返回第一个表的宽度，第一个单元格，然后循环退出。任何人都可以建议如何让JQuery循环遍历每个匹配表的所有第一个表格单元格吗？

Answer 1

您应该尝试:first-child而不是:first

var w = 0;        
$("table[id$='mytable'] tr td:first-child").each(function () {            
    if ($(this).width() > w) {
        w = $(this).width();
    }
});            
$("table[id$='mytable'] tr td:first-child").each(function () {
    $(this).css('width', w);
});

<强> jsFiddle Demo

Answer 2

基本上:first将返回元素集合中的第一个元素。因此，您选择所有td的第一个tr的方式是错误的。

您可以像这样更改代码以满足您的需求，

$("table[id$='mytable'] tr").each(function () {   
alert($(this).children('td').filter(':first').width());
//and your code goes here
});

作为替代方案，你也可以像这样使用nth-child选择器，

$(window).on('load', matchWidths);

function matchWidths() {
    var w = 0;

    $("table[id$='mytable'] tr td:nth-child(1)").each(function () {
        if ($(this).width() > w) {
            w = $(this).width();
        }
    });

    $("table[id$='gv_selfAllocSkills'] tr td:nth-child(1)").width(w);
}

Answer 3

tr td:first返回一个元素，即集合中的第一个元素，您可能正在寻找

tr td:first-child

这样的事情：

$(window).on('load', matchWidths);

function matchWidths() {
    var w = 0;

    $("table[id$='mytable'] tr td:first-child").each(function () {
        if ($(this).width() > w) {
            w = $(this).width();
        }
    });

    $("table[id$='gv_selfAllocSkills'] tr td:first-child").width(w);
}

Jquery访问表格单元格宽度

3 个答案: