javascript - 表中标签兄弟的 jQuery 选择器

Question

我正在为第三方网站编写用户脚本，并希望在具有前面的 TD 的表中选择值带有标签。

问题:我正在寻找 value1结果，但它选择了包含 TD 的同样，所以我得到 something else也是。

限制

• 无法修改 HTML 使其更便于查询(呃，这不是我的网站 ;)
• 该表没有 ID(我添加它们是为了便于讨论)，甚至没有 <table>本身有一个 id。
• 行数是动态的，所以没有tr:nth-child .

尝试过我发现了这个问题:Selecting an element which has another element as direct child并使用了直接选择器 ( tr:has(> td:contains )，但它仍然选择了超​​出需要的数量，因为 outer TD也可传递地包含 label1并且有一个 sibling 。

请注意，我设置的背景是透明的，以显示多个 TD s 被选中。

$(function() {
  $('#result').text($('tr:has(td:contains("label1")) > td:nth-child(2)').text())
  $('tr:has(td:contains("label1"))').css("background", "rgba(255,0,0,0.3)");
});

table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
td { padding: 4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="outer">
      <table>
        <tr><td id="known-info">label1</td><td id="want-to-select">value1</td></tr>
        <tr><td>label2</td><td>value2</td></tr>
      </table>
    </td>
    <td id="outer-sibling">something else</td>
  </tr>
</table>
<br/>
This should be "value1": "<span id="result"></span>"

Answer 1

你可以在你的选择器中使用 :not(:has(td)) 所以它应该是

$('td:contains("label1"):not(:has(td))').next().text()

这将选择包含 label1 文本的 td，但它会忽略父 td，因为它有另一个 td 里面。

var el = $('td:contains("label1"):not(:has(td))').next()
$('#result').text(el.text())
el.css('background', 'blue')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="outer">
      <table>
        <tr>
          <td id="known-info">label1</td>
          <td id="want-to-select">value1</td>
        </tr>
        <tr>
          <td>label2</td>
          <td>value2</td>
        </tr>
      </table>
    </td>
    <td id="outer-sibling">something else</td>
  </tr>
</table>
<br/> This should be "value1": "<span id="result"></span>"