JQuery 在嵌套元素上查找没有选择器的文本节点仅适用于 .contents() 和 filter()

Posted

技术标签:

【中文标题】JQuery 在嵌套元素上查找没有选择器的文本节点仅适用于 .contents() 和 filter()【英文标题】:JQuery find text nodes with not selector on nested elements work only with .contents() and filter() 【发布时间】:2016-01-01 05:08:11 【问题描述】:

请帮助我理解为什么会这样。

(更新)TL;DR: 嵌套元素的文本将在使用带有 not(NESTED_ELEMENT) 选择器的 find 时包含在内,但在使用带有 not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE) 的 find 时将被排除。

我想从页面中获取文本,但要排除一些元素。 为简单起见,我只排除了<p> 元素(和后代),但是当我使用text() 时,我也得到了排除元素中的文本。 当我使用contents() 过滤结果以仅包含文本节点时,只有通过不从排除的元素返回文本,非选择器才会“工作”。使用的代码请参见下图:

为什么不使用contents() 就不能工作?

谢谢。

为了您的方便:

我测试的网址是this one。

给我排除元素文本的代码:

$('body').find(':not(p, p *)').text()

为我提供所需文本的代码(排除元素的文本不存在):

$('body').find(':not(p, p *)').contents().filter(function()return this.nodeType == 3).text()

这是来自 URL 的 html 部分。如您所见,那里有一个<p> 元素,如上所述,我想从此 HTML 中获取文本,但要排除一些元素(为简单起见选择了 p,生产中会有更多规则)。

<div class="col-lg-12">
                    <header id="header" role="banner" class="jumbotron">
                        <h1>
                            <img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" >
                            <i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
                            <span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
                        </h1>
                        <p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right 
                        ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
                    </header>
                </div>

【问题讨论】:

请添加您的 HTML 代码。 可以包含实际的html 文本,js 在 Question 中尝试过吗?无法清楚地“看到”图像的文字,在这里 “好的,已添加到上面的问题中。” ?在哪里 ?没有html 出现在问题?需求是什么? @mrgoos 如果您在控制台中检查返回 $('body').find(':not(p, p *)').contents() 的内容,您会看到 :not() 不排除 P 元素,因为它是 DIV 元素的后代。这就是你在 filter() 方法中所做的,它排除了 P 元素的文本。也就是说,您可以使用:$('body').clone().find('p').remove().end().text().trim() @mrgoos 我没有太多时间去进一步检查发生了什么,但现在我明白你的意思了。这确实很令人困惑...... 【参考方案1】:

尝试使用.clone().remove().text()

var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();

console.log(filtered.text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-lg-12">
  <header id="header" role="banner" class="jumbotron">
    <h1>
                            <img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" >
                            <i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
                            <span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
                        </h1>
    <p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
  </header>
</div>

【讨论】:

谢谢,但正如我在帖子的评论中所写,我知道其他方法可以产生相同的要求,这不是问题。我想通过使用 contents()+filter 和 text() 来理解为什么 - not 选择器正在工作,但通过使用 find only 然后 text() => 它没有。 @mrgoos 仍然没有关注,这里。可以创建带有两个版本的 jsfiddle 来演示吗? 重点是嵌套元素的文本将在使用带有 not(NESTED_ELEMENT) 选择器的 find 时包含,但在使用带有 not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE) 的 find 时将被排除。你跟着?

以上是关于JQuery 在嵌套元素上查找没有选择器的文本节点仅适用于 .contents() 和 filter()的主要内容,如果未能解决你的问题,请参考以下文章

jquery查找元素

jquery Dom操作

[ jquery 过滤器 prevAll([expr]) ] 此方法用于在选择器的基础之上搜索查找当前元素之前所有的同辈元素

jquery内容筛选

什么是用于查找微调器的jquery语法

jQuery中dom操作(待续)