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

querySelectorAll和:第一个孩子

selectors-api javascript

12

notforever · 技术社区 · 9 年前

我试图用querySelectorAll获取一个wikipedia表中每行的第一个链接列表,但我不知道为什么:first child选择器不起作用。我知道还有其他方法可以做到这一点,但我想知道是否有一种解决querySelectorAll函数这个特定问题的方法。

查看html下面的我的尝试:

<table class='wikitable'>
  <tr>
    <td>
      <a href="" title="">John doe</a>
    </td>
    <td>
      <a href="" title="">other link</a>
    </td>
    </tr>

  <tr>
    <td>
      <a href="" title="">Mary Jane</a>
    </td>
    <td>
      <a href="" title="">another link</a>
    </td>
  </tr>
</table>

我的代码:

let list = document.querySelectorAll(('.wikitable tr:first-child td:first-child a'));

前面的代码只是返回一个包含一个元素的节点:

<a href="" title="">John doe</a>

而是一个列表:

<a href="" title="">John doe</a>
<a href="" title="">Mary Jane</a>

3 回复 | 直到 9 年前

1

11

Sebastian Simon SamB 9 年前

正确的选择器应为:

".wikitable tr td:first-child a"

tr:first-child 指 tr 这是第一个孩子。这仅适用于:

<tr>
  <td>
    <a href="" title="">John doe</a>
  </td>
  <td>
    <a href="" title="">other link</a>
  </td>
</tr>

2

4

Harris 9 年前

在里面 '.wikitable tr:first-child td:first-child a' , tr:first-child 将仅选择 tr 作为第一个子元素的元素(即,它仅选择第一个子元素 tr ).

'.wikitable tr td:first-child a' 将转到“”中的每一行。wikitable'表并选择任何 a 第一个单元格中的锚(可能只有一个,但技术上可以有更多)。

3

1

Deep 9 年前

您需要迭代所有行,因此选择器将是

document.querySelectorAll(('.wikitable tr td:first-child a'));

使用 tr:第一个孩子 将仅选择第一行。

let list = document.querySelectorAll(('.wikitable tr td:first-child a')); 

console.log(list);

<table class='wikitable'>
  <tr>
    <td>
      <a href="" title="">John doe</a>
    </td>
    <td>
      <a href="" title="">other link</a>
    </td>
    </tr>

  <tr>
    <td>
      <a href="" title="">Mary Jane</a>
    </td>
    <td>
      <a href="" title="">another link</a>
    </td>
  </tr>
</table>