jQuery table 中标签兄弟的选择器

Question

我正在为第三方网站编写用户脚本，并寻找 table 中的 select 值，该 table 前面有一个带标签的 TD。

问题：我希望得到 value1 作为结果，但它也是 selecting 包含的 TD，所以我也得到 something else。

限制

无法将 HTML 修改为更便于查询（呃，这不是我的网站 ;）
table没有 ID（我添加它们是为了方便讨论），甚至 <table> 本身也没有 ID。
行数是动态的，所以没有tr:nth-child.

尝试过 我发现了这个问题：Selecting an element which has another element as direct child 并使用了直接的 select 或 (tr:has(> td:contains)，但它仍然比需要的 selects 多，因为 outer TD 也可传递地包含 label1 并且有一个兄弟。

注意我设置的背景是透明的，表示多个TD是select编辑的。

$(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

您可以在 select 中使用 :not(:has(td))，或者应该是

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

这将 select td 包含 label1 文本，但它会忽略父 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>"

jQuery table 中标签兄弟的选择器

jQuery selector for sibling of a label in a table

javascript

jquery

jquery-selectors