使用其选择器文本查找 <tr>，然后获取其标题

Question

我似乎无法获得正确的语法。最终，我试图让工具提示显示 table 的 sub-group tr 标题文本，无论哪个单元格悬停在该子组内。

<table>
<tbody>
  <tr data-cb-name="group1" title="A_Heading">
    <td>A_Intro</td>
  </tr>

  <tr>
    <td></td>
    <td>admin1</td>
    <td>manage1</td>
  </tr>

  <tr>
    <td></td>
    <td>admin2</td>
    <td>manage2</td>
  </tr>

  <tr data-cb-name="group1" title="B_Heading">
    <td>B_Intro</td>
  </tr>

  <tr>
    <td></td>
    <td>admin3</td>
    <td>manage3</td>
  </tr>

  <tr>
    <td></td>
    <td>admin4</td>
    <td>manage4</td>
  </tr>
</tbody>
</table>

jQuery:

$(function() {

var Col1 = "";
var Col2_3 = "";

  $.each($('tr'), function() {
    if ($(this).attr("data-cb-name"))
    {
      Col1 = $(this).attr('title')
      console.log('Col1 =', Col1);
    } else

    {
      Col2_3 = $(this).closest("[data-cb-name ='group1']").attr("title", "title").text();
      console.log('Col2_3 =', Col2_3);
    }

  })

})

objective 是每当将鼠标悬停在 'admin1'、'admin2'、'manage1' 或 'manage2' 上时，我希望工具提示显示 'A_Heading'.每当将鼠标悬停在 'admin3'、'admin4'、'manage3' 或 'manage4' 上时，我希望工具提示显示 'B_Heading'。为此，我需要在 table 中向上移动以找到最近的包含以下内容的 tr：

data-cb-name="group1"

...因为这对所有 sub-group headers 都是通用的。然而，标题文本是动态的，这就是我想要分配给工具提示的内容。该行：

Col2_3 = $(this).closest("[data-cb-name ='group1']").attr("title", "title").text();

... 这条线给我带来了很多麻烦。我已经尝试了所有我能想到的 closest、find、attribute 和 text 的组合，但是我无法在控制台中得到 'Col2_3' 的结果。谁能把我从痛苦中解救出来！

Answer 1

.closest 不适用于您的情况，您希望具有数据属性的前一个兄弟姐妹：data-cb-name、.closest 将查看祖先（parent 及以上）不是兄弟姐妹。请参阅有关 .closest() - (https://api.jquery.com/closest/)
的文档
您正在将属性 title 设置为单词“title”，.text() 不是必需的。

更改为以下使用 .prevAll 获取具有数据属性的最近 tr 兄弟并获取其属性标题：

$(function() {
    var Col1 = "";
    var Col2_3 = "";

      $.each($('tr'), function() {
        if ($(this).attr("data-cb-name")){
          Col1 = $(this).attr('title')
          console.log('Col1 =', Col1);
        } else {
          Col2_3 = $(this).prevAll("[data-cb-name='group1']").attr("title");
          console.log('Col2_3 =', Col2_3);
        }

      });

});

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<table>
<tbody>
  <tr data-cb-name="group1" title="A_Heading">
    <td>A_Intro</td>
  </tr>

  <tr>
    <td></td>
    <td>admin1</td>
    <td>manage1</td>
  </tr>

  <tr>
    <td></td>
    <td>admin2</td>
    <td>manage2</td>
  </tr>

  <tr data-cb-name="group1" title="B_Heading">
    <td>B_Intro</td>
  </tr>

  <tr>
    <td></td>
    <td>admin3</td>
    <td>manage3</td>
  </tr>

  <tr>
    <td></td>
    <td>admin4</td>
    <td>manage4</td>
  </tr>
</tbody>
</table>

使用其选择器文本查找 <tr>，然后获取其标题

Find <tr> using its selector text and then get its title

tags

jquery

使用其选择器文本查​​找 <tr>，然后获取其标题

Find <tr> using its selector text and then get its title

tags

jquery

使用其选择器文本查找 <tr>，然后获取其标题