使用 jQuery 选择器组合多个 JS 选择器

Question

我正在使用以下 JS 行选择一组表行：document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller")这些代表目录中的条目。我只想返回上面那些也包含单词“CHAPTER”的内容，所以我试图使用 jQuery :contains() 选择器来完成此操作，并试图将整个内容转换为单个 jQuery 选择器；因此，首先，我尝试转换以下无效行：document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller").$(":contains('CHAPTER')")对此：$("#tab1_content > contentDocument > documentElement > .data1_smaller:contains('CHAPTER')")上面的选择器没有给出错误，但它找不到任何东西。有人知道这样做的正确方法吗？

Answer 1

你可以像开始时那样用纯 vanilla js 实现你想要的。您只需要对代码做一些小的调整。您可以使用它querySelectorAll()来查询与您 ID 内的选择器匹配的所有元素。仅通过查看您的示例，这样的事情就应该起作用，但可能需要进行一些小的调整。

[...document.getElementById('tab1_content').querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))

// Edit, saw in the comments that you're accessing content in an iframe

[...document.getElementById('tab1_content').contentWindow.document.querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))

Answer 2

我根据 Anurag Srivastava 的评论找到了这个解决方案：

$("#tab1_content").contents().find(".data1_smaller:contains('CHAPTER')")

问题是我试图选择 iframe 内部的内容，而我用来访问 JS 中的 iframe 的 .contentDocument.documentElement 必须更改为 jQuery 中的 .contents() 才能正常工作。

Answer 3

contentDocument 或 documentElement 都不是有效的 HTML 标签。尝试按 id 或类名进行选择。