立即访问 div 的 children

Question

下面是我的 html 代码。

<div id="this">
    <a href="xxx"> xx</a>
    <a href="yy"> yy</a>
    <a href="zzz"> zzz</a>
    aaa
    <a href="bbb"> bbb</a>
    ccc
</div>

我必须获取 this div 的所有 children，即 [xx,yy,zzz,aaa,bbb,ccc]

但是通过使用下面的代码我只能得到 [xx,yy,zzz,bbb]。如何访问其他2[aaa,ccc]?

const cheerio = require('cheerio');

var $ = cheerio.load('<div id="this"> <a href="xxx"> xx</a> <a href="yy"> yy</a> <a href="zzz"> zzz</a> aaa <a href="bbb"> bbb</a> ccc </div>')

$('div#this').children().each(function(i, child){
    console.log($(this).text())
})

Answer 1

问题是 [aaa,ccc] 是文本节点，不被视为子节点，您可以使用 contents 而不是 children。请记住，这也会 returns 注释节点

const cheerio = require('cheerio');

var $ = cheerio.load('<div id="this"> <a href="xxx"> xx</a> <a href="yy"> yy</a> <a href="zzz"> zzz</a> aaa <a href="bbb"> bbb</a> ccc </div>')

$('div#this').contents().each(function(i, child){
   console.log($(this).text())
})

Answer 2

Element 和 Text 在继承链中共享同一个父 Node（DOM4 添加 CharacterData）。 Element.childNodes 是 NodeList 而 Element.children 是 HTMLCollection 这是元素的集合。 jQuery.children returns 没有 Text 的元素集合。您可以访问原始 DOM 元素以获得您想要的内容。

立即访问 div 的 children

access immediate children of a div

html

jquery

dom

node.js

cheerio