Question

我正在尝试将工具提示附加到每行唯一的数据行中的最后一项，但是当我附加最新项工具提示时，它会覆盖前一行的工具提示。

这就是我想要的：

ID |名称
933435 |第1项 - 在悬停在它上面时，应该说“项目名称是：第1项”。
877988 |第2项 - 在悬停在它上面时，它应该说“项目名称是：第2项”。
746468 |第3项 - 悬停在它上面时应该说“项目名称是：第3项”。

但这就是我得到的：

ID |名称
933435 |第1项 - 悬停在它上面说“项目名称是：第3项”。
877988 |第2项 - 悬停在它上面说“项目名称是：第3项”。
746468 |第3项 - 悬停在它上面说“项目名称是：第3项”。

它将工具提示附加到每行中的每个最后一个表项，而不是最后添加的行的最后一项。

以下是我正在使用的代码：

$.each(data, function (i, val) {

            // create row of data
            items = '<tr>' +
                '<td>' + val.itemID + '</td>' +
                '<td>' + val.itemName + '</td>'
                '</tr>';

            // appends the created row to the body of the table
            $('tbody').append(items);

            // appends a unique tooltip to the end of the added row
            $('td:last-child').attr('title', 'The items name is: ' + val.itemName);

        });

有没有办法解决这个问题而不将工具提示放在像'<td title="">'这样的表项目中？我试图不这样做。任何帮助表示赞赏。

Answer 1

您可以追加jQuery对象并修改该对象中的td，而不是附加字符串

当您在$()中包装有效的html片段时，您可以在生成的对象上使用jQuery方法，就像它们已经在页面中一样

$.each(data, function(i, val) {

  // create row of data
  var $items = $('<tr>' +
    '<td>' + val.itemID + '</td>' +
    '<td>' + val.itemName + '</td>'
    '</tr>');

  // only apply tooltip to the current row
  $items.find('td:last').attr('title', 'The items name is: ' + val.itemName);

  // appends the created row to the body of the table
  $('tbody').append($items);



});

或者更改您的选择器，使其仅查看最后一行

$('tbody tr:last td:last').attr('title....

目前正在发生的事情是，你在循环的每次迭代中循环遍历所有现有的最后一个子节点，覆盖所有现有的子节点而不仅仅是新节点

将唯一工具提示附加到JQuery foreach循环

1 个答案: