Ширина ячейки таблицы доступа JQuery

Question

У меня есть серия таблиц, где значение идентификатора каждого из них заканчивается той же строкой, например.

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