Как использовать querySelectorAll только для элементов, имеющих определенный дочерний элемент?

Question 1

    <table>
      <tr>
        <th>Column name</th>
        <th>Column name</th>
      </tr>
      <tr>
        <td>Column value</td>
        <td>Column value</td>
      <tr>
    </table>
    <table>
      <tr>
        <th>Column name</th>
        <th>Column name</th>
      </tr>
      <tr>
        <td>Column value</td>
        <td>Column value</td>
      <tr>
    </table>

Я хотел бы обработать все tr которые содержат td, но может находить только запросы, содержащие атрибуты и содержимое, а не элементы. Возможно ли последнее с помощью одного запроса?

Question 2

Не напрямую, но вы можете использовать filter чтобы получить соответствующие строки

const rowsWithTd = [...document.querySelectorAll("table tr")].filter( x => x.querySelector("td"))
console.log(rowsWithTd.map(x => x.outerHTML))

<table>
  <tr>
    <th>Column name</th>
  </tr>
  <tr>
    <td>Column value</td>
  <tr>
</table>
<table>
  <tr>
    <th>Column name</th>
  </tr>
  <tr>
    <td>Column value</td>
  <tr>
</table>

Jamiec · Answer 1 · 2021-11-22T10:47:03

Не напрямую, но вы можете использовать filter чтобы получить соответствующие строки

const rowsWithTd = [...document.querySelectorAll("table tr")].filter( x => x.querySelector("td"))
console.log(rowsWithTd.map(x => x.outerHTML))

<table>
  <tr>
    <th>Column name</th>
  </tr>
  <tr>
    <td>Column value</td>
  <tr>
</table>
<table>
  <tr>
    <th>Column name</th>
  </tr>
  <tr>
    <td>Column value</td>
  <tr>
</table>

Как использовать querySelectorAll только для элементов, имеющих определенный дочерний элемент?

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории