使用 GetElementsByClass 按类名查找所有 <div> 元素，嵌套在 <p> 元素中答案

【问题标题】：Use GetElementsByClass to find all <div> elements by class name, nested inside a <p> element使用 GetElementsByClass 按类名查找所有 <div> 元素，嵌套在 <p> 元素中
【发布时间】：2022-11-01 19:10:23
【问题描述】：

我正在 Kotlin 中使用 Jsoup 创建解析器

我需要在具有类“titleCard-synopsis”的标签内获取具有类“ptrack-content”的标签的内部文本

当我试图在由以前的 getElementsByClass 创建的元素对象中获取元素对象时，我得到 0 个元素

代码：

class NetlifxHtmlParser {

    val html = """
         <div class="titleCardList--metadataWrapper">
            <div class="titleCardList-title"><span class="titleCard-title_text">Map Her</span><span><span class="duration ellipsized">50m</span></span></div>

            <p class="titleCard-synopsis previewModal--small-text">
            <div class="ptrack-content">A hidden map rocks Hartley High as the students' sexcapades are publicly exposed. Caught as the culprit, Amerie becomes an instant social pariah.</div>
            </p>

         </div>
         
          <div class="titleCardList--metadataWrapper">
             <div class="titleCardList-title"><span class="titleCard-title_text">Renaissance Titties</span><span><span class="duration ellipsized">50m</span></span></div>
             <p class="titleCard-synopsis previewModal--small-text">
             <div class="ptrack-content">Amerie, the new outcast, receives a party invitation that gives her butterflies. But when she manages to show up, a bitter surprise awaits.</div>
             </p>
          </div>
    """.trimIndent()

    fun parseEpisode() {
        val doc = Jsoup.parseBodyFragment(html)
        val titleCards = doc.getElementsByClass("titleCard-synopsis")
        println("Episode: count titleCard = > ${titleCards.count()}") // 2

        titleCards.forEachIndexed { index, element ->
            val ptrack = element.getElementsByClass("ptrack-content")
            println("Episode: count ptrack = > ${ptrack.count()}") // 0 !!
            println("inner html = > ${ptrack.html()}") // null string !!

        }

    }
}

在上面的代码中，

首先，我提取类名titleCard-synopsis 的标签。

为此，我使用 doc.getElementsByClass("titleCard-synopsis") 返回 2 个元素项。

然后，在titleCard 元素列表中，我通过在每个元素中使用相同的 getElementsByClass 来提取具有ptrack-content 作为类的元素，

它返回空列表。

为什么会这样？

我的目标是，我需要提取每个标题的描述文本，存储在类 titleCard-synopsis 的 p 标签的内部标签中。

如果我尝试直接从“ptrack-content”获取，它工作正常，但这是一个在主要 HTML 源代码的许多地方使用的通用类。（这是sn-p）

我需要在带有类“titleCard-synopsis”的标签内获取带有类“ptrack-content”的标签的内部文本

但是在代码中的上述方法中，我只得到空列表。

为什么？

另请注意，如果我在titleCards(ptrack.html()) 的元素对象中调用HTML() 方法，我没有得到内部 DIV 标签，一个空字符串！！！

请指导我解决问题！

【问题讨论】：

标签： kotlin jsoup html-parsing

【解决方案1】：

TL;博士

我需要在具有类“titleCard-synopsis”的标签内获取具有类“ptrack-content”的标签的内部文本

我对 Kotlin 不是很熟悉，但这应该会输出您要查找的内容：
val doc = Jsoup.parseBodyFragment(html)
val result = doc.select(".titleCard-synopsis + .ptrack-content")

result.forEachIndexed {index, element -> 
    println("${element.html()}")
}
Live example

这是一个有趣的问题！

您基本上有一个无效的 HTML，而 jsoup 足够聪明，可以为您自动更正它。您的 HTML 结构被更改，突然您的查询不起作用。

这是错误：
<p class="titleCard-synopsis previewModal--small-text">
  <div class="ptrack-content">A hidden map rocks Hartley High as the students' sexcapades are publicly exposed. Caught as the culprit, Amerie becomes an instant social pariah.</div>
</p>
您不能像这样将<div> 元素嵌套在<p> 元素中。
段落是块级元素, 尤其会自动关闭如果在结束 </p> 标记之前解析另一个块级元素。[来源：<p>: The Paragraph element]

另外，看看Nesting block level elements inside the <p> tag... right or wrong?

这是 jsoup 解析树的方式：
<html>
 <head></head>
 <body>
  <div class="titleCardList--metadataWrapper">
   <div class="titleCardList-title">
    <span class="titleCard-title_text">Map Her</span><span><span class="duration ellipsized">50m</span></span>
   </div>
   <p class="titleCard-synopsis previewModal--small-text"></p>
   <div class="ptrack-content">
    A hidden map rocks Hartley High as the students' sexcapades are publicly exposed. Caught as the culprit, Amerie becomes an instant social pariah.
   </div>
   <p></p>
  </div>
  <div class="titleCardList--metadataWrapper">
   <div class="titleCardList-title">
    <span class="titleCard-title_text">Renaissance Titties</span><span><span class="duration ellipsized">50m</span></span>
   </div>
   <p class="titleCard-synopsis previewModal--small-text"></p>
   <div class="ptrack-content">
    Amerie, the new outcast, receives a party invitation that gives her butterflies. But when she manages to show up, a bitter surprise awaits.
   </div>
   <p></p>
  </div>
 </body>
</html>
如您所见，类titleCard-synopsis 的元素没有类ptrack-content 的子元素。

【讨论】：

哦哦。 HTML 格式错误。我通过 Inspect Element 从 Netflix 网站复制了它。
所以即使是 Netflix 也有畸形的 HTML ??????
显然。我的回答对你有帮助吗？
是的。所以我的解析方式没有任何错误。由于 HTML 格式错误，它失败了。正确的？