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] 但我不确定需要做什么才能使其遍历 each td?

它循环遍历每个 TD，因为我将它全部包裹在 jquery each 函数中，但它只是在第一个 td 处循环 行。每行都被命名为相同的东西（又名 data-colname="number_0"、data-colname="line_0" 等...) 所以我不能寻找它来区分每一行..

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];

由于 [data-colname="' + name + '"] 选择器，

只会撤回第一个 td，因为 table 中的每一行似乎共享相同的 data-colname 属性。

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

jQuery loop through TD and check values with same attributes

javascript

each

jquery