Jquery訪問表單元格寬度

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