Question

$("td:not(:has(input))").each(function ( index,element){
console.log(index);
console.log(element);
console.log($(this).text())});

td {
  border: 1px solid black;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>test1</td>
    <td>test2</td>
  </tr>
  <tr>
    <td><input type="text">test3</td>
    <td><input type="text">test4</td>
  </tr>
</table>

我要选择所有不包含子节点td的{{1}}，也就是说，我期望如下：

input

已通过jquery的选择表达式<td>test1</td> <td>test2</td>进行了验证，效果很好。
有一个著名的网页td:not(:has(input))和一本书You Don't Need jQuery!。

You Don't Need jQuery!

让我们尝试使用纯JavaScript。

我们可以用纯js完成工作吗？

Answer 1

原生JS中没有:has选择器替代品，您可以通过遍历所有td并手动检查来实现：

document.querySelectorAll("td").forEach(function(element) {
  if (!element.querySelector('input')) {
    console.log(element.innerText);
  }
});

td {
  border: 1px solid black;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>test1</td>
    <td>test2</td>
  </tr>
  <tr>
    <td><input type="text">test3</td>
    <td><input type="text">test4</td>
  </tr>
</table>

选择元素不包含带有纯js的指定子节点

1 个答案: