代码之家 › 专栏 › 技术社区 › TWiStErRob

用于表中标签同级的jQuery选择器

jquery-selectors jquery javascript

TWiStErRob · 技术社区 · 8 年前

TD 带有标签。

问题 :我希望 value1 TD 还有,所以我 something else

局限性

桌子上有 (为了便于讨论,我添加了它们),即使是 <table> 本身有一个id。
tr:nth-child .

我发现了这个问题: Selecting an element which has another element as direct child tr:has(> td:contains outer 也可传递包含 label1 还有一个兄弟姐妹。

请注意,我设置的背景是透明的,以显示多个 TD 选择。

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

1 回复 | 直到 8 年前

Nenad Vracar 8 年前

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

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

这将选择 td 包含 label1 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>"