jQuery循环遍历TD并检查具有相同属性的值

Question

我正在尝试使用 td 属性遍历我当前显示的所有表格。

var name = "";
var theCell = "";
var width1 = "";
var width2 = "";
var intX = 0;

$("td").each(function (inx) {
     name = $(this).data("colname");

     theCell = $('[data-colname="' + name + '"]')[0];
     console.log(theCell);

     if (typeof theCell != 'undefined') {
          width1 = theCell.scrollWidth;   
          width2 = theCell.clientWidth;

          //console.log(width1);

          if (width1 > width2) {
               //console.log(theCell);
               $(theCell).ellipsis({ lines: 1 });
               $(theCell).css({ 'background-color': '#000' });
          }
     }
});

console.log（theCell）的输出：

<td data-colname="number_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">1</td>
<td data-colname="line_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">1</td>
<td data-colname="network_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">Welcome 1</td>
...more here...
<td data-colname="number_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">45</td>
<td data-colname="line_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">2</td>
<td data-colname="network_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">Welcome 2</td>
...more here...
<td data-colname="number_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">23</td>
<td data-colname="line_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">775</td>
<td data-colname="network_0" class="jsgrid-cell jsgrid-align-left" style="width: 80px;">Welcome 3</td>
...more here...etc etc...

在页面上看起来像这样：

然而，它似乎只是循环通过第一个 td ，而这一切都是。我认为它是由于 [0] 但我不确定需要做什么才能让它循环遍历每个 td

循环遍历每个TD因为我将它全部包含在 jquery每个函数中，但它只是在第一个 td 行循环。每行的名称相同（又名数据colname =＆＃34; number_0＆＃34; ， data-colname =＆＃34; line_0＆＃34; 等...）所以我不能寻找那个区别于一行......

Answer 1

我的猜测是你要这样做：

$('td').each(function (index, elem) {
    if (elem.scrollWidth > elem.clientWidth) {
        // console.log(elem);
        $(elem).ellipsis({ lines: 1 }).css({ 'background-color': '#000' });
    }
});

在.each处理程序中包含第二个参数，可以直接访问要循环的元素。

代码中的这一行：

theCell = $('[data-colname="' + name + '"]')[0];

只会因为td选择器而退回第一个[data-colname="' + name + '"]，因为表格中的每一行似乎都共享相同的data-colname属性。