JQuery 选择器忽略一个元素？
JQuery selector to ignore an element?
我正在提取文章页面内容。
一个选择器，"entry": $('div.content__article-body').html().trim()获取正文body。
这主要包括带有 <p> 和 header 标签的文本段落，这正是我想要的。
但是，它也得到了一个我不想要的元素，即<aside>。
如何确保 <aside> 不包含在结果文本中？
我在这里阅读了关于 "not" 的话题。
我尝试过类似...
$('div.content__article-body').not('aside').html().trim()
$('div.content__article-body').html().not('aside').trim()
$('div.content__article-body:not(aside)').html().trim() 或 $('div.content__article-body:not('aside')').html().trim() - 不确定。
但是其中 none 似乎有效。我是否误解了如何使用 "not"？
更新：摘录如下（aside基本上是文章中的box-out）...
</figcaption>
</figure>
</header>
<div class="content__article-body from-content-api js-article__body" itemprop="articleBody" data-test-id="article-review-body">
<p>A wise man once <a href="http://www.quora.com/Who-originally-suggested-that-if-youre-not-paying-for-the-product-you-are-the-product" rel="nofollow" data-link-name="in body link" class="u-underline">said</a>: “If you’re not paying for it, you’re the product.” That’s what is happening in the magazine world, as <a href="https://www.theguardian.com/media/2015/jul/06/nme-to-go-free-with-larger-circulation" data-link-name="in body link" class="u-underline">NME abandons its cover price</a> after 63 years, to go free.<br></p>
<p>In doing so, the title is turning its readers from customers in to advertiser targets. But NME is far from the first property to try this trick. <a href="http://articles.baltimoresun.com/1996-11-13/features/1996318156_1_village-voice-schneiderman-circulation" rel="nofollow" data-link-name="in body link" class="u-underline">The Village Voice</a>, the <a href="http://www.britishpapers.co.uk/england-wmids/shrewsbury-chronicle/" rel="nofollow" data-link-name="in body link" class="u-underline">Shrewsbury Chronicle</a>, the <a href="https://news.google.com/newspapers?id=HU1aAAAAIBAJ&sjid=KSgMAAAAIBAJ&pg=1120%2C535142" rel="nofollow" data-link-name="in body link" class="u-underline">Standard</a> of Hong Kong, <a href="https://gigaom.com/2007/10/31/419-friends-reunited-dropping-subscriptions-to-go-free-ad-supported-report/" rel="nofollow" data-link-name="in body link" class="u-underline">Friends Reunited</a>, the <a href="https://gigaom.com/2009/10/02/419-london-evening-standard-bold-re-birth-or-a-free-folly/" rel="nofollow" data-link-name="in body link" class="u-underline">Evening Standard</a>, the <a href="http://www.fulhamsw6.com/default.asp?section=info&spage=common/contrinity001.htm" rel="nofollow" data-link-name="in body link" class="u-underline">Fulham and Hammersmith Chronicle</a>, Time Out in <a href="https://gigaom.com/2008/09/01/419-time-out-seeking-investors-could-go-free-and-beef-up-online/" rel="nofollow" data-link-name="in body link" class="u-underline">London</a> and <a href="http://www.timeout.com/about/time-out-group/latest-news/time-out-new-york-announces-launch-of-its-magazine-to-free-weekly-distribution" rel="nofollow" data-link-name="in body link" class="u-underline">New York</a>, and now <a href="https://www.theguardian.com/media/greenslade/2015/jul/08/the-sun-lowers-its-paywall-allowing-free-access-to-many-stories" data-link-name="in body link" class="u-underline">parts of the Sun’s website</a> are all among those to have dropped their fees in favour of frees.</p>
<p>But what has become of the converts? And what do their fortunes since tell us, <a href="https://www.theguardian.com/music/nme" data-link-name="auto-linked-tag" data-component="auto-linked-tag" class="u-underline">NME</a> and other operators about the key ingredients for a successful switch?</p>
<aside class="element element-rich-link element--thumbnail element-rich-link--not-upgraded" data-component="rich-link" data-link-name="rich-link-1 | 1">
<div class="rich-link">
<div class="rich-link__container">
<div class="rich-link__header">
<h1 class="rich-link__title">Old media's prospects have improved but the new media threat looms large</h1>
</div>
<div class="rich-link__read-more">
<div class="rich-link__arrow">
<span class="inline-arrow-in-circle inline-icon ">
<svg width="24" height="24" viewbox="0 0 24 24" class="inline-arrow-in-circle__svg inline-icon__svg">
<path class="rich-link__arrow-icon" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m.21 19l-.637-.668 4.888-6.326H4.996v-1.01h11.465l-4.888-6.333.637-.668L19 11.153v.685l-6.79 7.157" fill-rule="evenodd"/>
</svg> </span>
</div>
<div class="rich-link__read-more-text">
Read more
</div>
</div>
<a class="rich-link__link u-faux-block-link__overlay" href="https://www.theguardian.com/media-network/2015/mar/20/new-media-threat-buzzfeed-vice" aria-label="Old media's prospects have improved but the new media threat looms large"></a>
</div>
</div>
</aside>
<h2>1. Know your predicament</h2>
<p>It would be nice to say the switch to free comes either out of benevolence or out of a market opportunity. The reality is, operators invariably flick the switch under external pressure of a poor business outlook – no amount of dressing up as a “bold relaunch” can change that.</p>
<p>NME’s circulation was falling by <a href="https://www.theguardian.com/media/2014/feb/13/nme-relaunch-sales-slide-ipc-media" data-link-name="in body link" class="u-underline">around a fifth annually</a>. The Evening Standard was frustrated to find itself far behind national dailies on ad planners’ schedules, locking it out of big brand bucks, according to someone familiar with the strategy to switch.</p>
<p>The Village Voice dropped its cover charge in 1996 after being eaten into by rival New York Press being given away in green sidewalk boxes, while Hong Kong’s Standard newspaper was forced to act when the government removed a decree that listed companies must buy classified ads in newspapers. But the key – as anyone who has heard the “<a href="https://en.wikipedia.org/wiki/Boiling_frog" rel="nofollow" data-link-name="in body link" class="u-underline">boiling frog</a>” allegory will know – is to recognise when it is your time to change tack.</p>
试试这个。
$("div.content_article-body *:not(aside)");
您可以尝试这样的操作：
var e = $('.box').html();
console.log(e);
var subStr = e.match("<aside>(.*?)</aside>");
var r = e.replace(subStr[0], "");
console.log(r);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Some text here
<p>More text here</p>
<aside>this is an <span>aside</span></aside>
</div>
或者您创建另一个元素，然后删除 aside 节点：
var e = $('.box').html();
var newE = $('<div>'+e+'</div>');
newE.find('aside').remove();
console.log(newE.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Some text here
<p>More text here</p>
<aside>this is an <span>aside</span></aside>
</div>
使用 .not() 方法，这样做，将选择器扩展到 div.content__article-body > *，使其以 div 的兄弟姐妹为目标，然后遍历结果。
子选择器 > 的使用允许排除 aside 中的任何元素，尽管这也会影响其他元素，并将它们的子元素带回输出，使用.outerHTML.
堆栈片段
$('div.content__article-body > *').not('aside').each( function( index, value ) {
console.log( value.outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content__article-body">
<p>some paragraph <span>some span</span></p>
<div>some div</div>
<aside>an aside <div>some div in aside</div></aside>
</div>
并使用 :not() 选择器。
堆栈片段
$('div.content__article-body > *:not(aside)').each( function( index, value ) {
console.log( value.outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content__article-body">
<p>some paragraph <span>some span</span></p>
<div>some div</div>
<aside>an aside <div>some div in aside</div></aside>
</div>
我正在提取文章页面内容。
一个选择器，"entry": $('div.content__article-body').html().trim()获取正文body。
这主要包括带有 <p> 和 header 标签的文本段落，这正是我想要的。
但是，它也得到了一个我不想要的元素，即<aside>。
如何确保 <aside> 不包含在结果文本中？
我在这里阅读了关于 "not" 的话题。 我尝试过类似...
$('div.content__article-body').not('aside').html().trim()
$('div.content__article-body').html().not('aside').trim()
$('div.content__article-body:not(aside)').html().trim() 或 $('div.content__article-body:not('aside')').html().trim() - 不确定。
但是其中 none 似乎有效。我是否误解了如何使用 "not"？
更新：摘录如下（aside基本上是文章中的box-out）...
</figcaption>
</figure>
</header>
<div class="content__article-body from-content-api js-article__body" itemprop="articleBody" data-test-id="article-review-body">
<p>A wise man once <a href="http://www.quora.com/Who-originally-suggested-that-if-youre-not-paying-for-the-product-you-are-the-product" rel="nofollow" data-link-name="in body link" class="u-underline">said</a>: “If you’re not paying for it, you’re the product.” That’s what is happening in the magazine world, as <a href="https://www.theguardian.com/media/2015/jul/06/nme-to-go-free-with-larger-circulation" data-link-name="in body link" class="u-underline">NME abandons its cover price</a> after 63 years, to go free.<br></p>
<p>In doing so, the title is turning its readers from customers in to advertiser targets. But NME is far from the first property to try this trick. <a href="http://articles.baltimoresun.com/1996-11-13/features/1996318156_1_village-voice-schneiderman-circulation" rel="nofollow" data-link-name="in body link" class="u-underline">The Village Voice</a>, the <a href="http://www.britishpapers.co.uk/england-wmids/shrewsbury-chronicle/" rel="nofollow" data-link-name="in body link" class="u-underline">Shrewsbury Chronicle</a>, the <a href="https://news.google.com/newspapers?id=HU1aAAAAIBAJ&sjid=KSgMAAAAIBAJ&pg=1120%2C535142" rel="nofollow" data-link-name="in body link" class="u-underline">Standard</a> of Hong Kong, <a href="https://gigaom.com/2007/10/31/419-friends-reunited-dropping-subscriptions-to-go-free-ad-supported-report/" rel="nofollow" data-link-name="in body link" class="u-underline">Friends Reunited</a>, the <a href="https://gigaom.com/2009/10/02/419-london-evening-standard-bold-re-birth-or-a-free-folly/" rel="nofollow" data-link-name="in body link" class="u-underline">Evening Standard</a>, the <a href="http://www.fulhamsw6.com/default.asp?section=info&spage=common/contrinity001.htm" rel="nofollow" data-link-name="in body link" class="u-underline">Fulham and Hammersmith Chronicle</a>, Time Out in <a href="https://gigaom.com/2008/09/01/419-time-out-seeking-investors-could-go-free-and-beef-up-online/" rel="nofollow" data-link-name="in body link" class="u-underline">London</a> and <a href="http://www.timeout.com/about/time-out-group/latest-news/time-out-new-york-announces-launch-of-its-magazine-to-free-weekly-distribution" rel="nofollow" data-link-name="in body link" class="u-underline">New York</a>, and now <a href="https://www.theguardian.com/media/greenslade/2015/jul/08/the-sun-lowers-its-paywall-allowing-free-access-to-many-stories" data-link-name="in body link" class="u-underline">parts of the Sun’s website</a> are all among those to have dropped their fees in favour of frees.</p>
<p>But what has become of the converts? And what do their fortunes since tell us, <a href="https://www.theguardian.com/music/nme" data-link-name="auto-linked-tag" data-component="auto-linked-tag" class="u-underline">NME</a> and other operators about the key ingredients for a successful switch?</p>
<aside class="element element-rich-link element--thumbnail element-rich-link--not-upgraded" data-component="rich-link" data-link-name="rich-link-1 | 1">
<div class="rich-link">
<div class="rich-link__container">
<div class="rich-link__header">
<h1 class="rich-link__title">Old media's prospects have improved but the new media threat looms large</h1>
</div>
<div class="rich-link__read-more">
<div class="rich-link__arrow">
<span class="inline-arrow-in-circle inline-icon ">
<svg width="24" height="24" viewbox="0 0 24 24" class="inline-arrow-in-circle__svg inline-icon__svg">
<path class="rich-link__arrow-icon" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m.21 19l-.637-.668 4.888-6.326H4.996v-1.01h11.465l-4.888-6.333.637-.668L19 11.153v.685l-6.79 7.157" fill-rule="evenodd"/>
</svg> </span>
</div>
<div class="rich-link__read-more-text">
Read more
</div>
</div>
<a class="rich-link__link u-faux-block-link__overlay" href="https://www.theguardian.com/media-network/2015/mar/20/new-media-threat-buzzfeed-vice" aria-label="Old media's prospects have improved but the new media threat looms large"></a>
</div>
</div>
</aside>
<h2>1. Know your predicament</h2>
<p>It would be nice to say the switch to free comes either out of benevolence or out of a market opportunity. The reality is, operators invariably flick the switch under external pressure of a poor business outlook – no amount of dressing up as a “bold relaunch” can change that.</p>
<p>NME’s circulation was falling by <a href="https://www.theguardian.com/media/2014/feb/13/nme-relaunch-sales-slide-ipc-media" data-link-name="in body link" class="u-underline">around a fifth annually</a>. The Evening Standard was frustrated to find itself far behind national dailies on ad planners’ schedules, locking it out of big brand bucks, according to someone familiar with the strategy to switch.</p>
<p>The Village Voice dropped its cover charge in 1996 after being eaten into by rival New York Press being given away in green sidewalk boxes, while Hong Kong’s Standard newspaper was forced to act when the government removed a decree that listed companies must buy classified ads in newspapers. But the key – as anyone who has heard the “<a href="https://en.wikipedia.org/wiki/Boiling_frog" rel="nofollow" data-link-name="in body link" class="u-underline">boiling frog</a>” allegory will know – is to recognise when it is your time to change tack.</p>
试试这个。
$("div.content_article-body *:not(aside)");
您可以尝试这样的操作：
var e = $('.box').html();
console.log(e);
var subStr = e.match("<aside>(.*?)</aside>");
var r = e.replace(subStr[0], "");
console.log(r);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Some text here
<p>More text here</p>
<aside>this is an <span>aside</span></aside>
</div>
或者您创建另一个元素，然后删除 aside 节点：
var e = $('.box').html();
var newE = $('<div>'+e+'</div>');
newE.find('aside').remove();
console.log(newE.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Some text here
<p>More text here</p>
<aside>this is an <span>aside</span></aside>
</div>
使用 .not() 方法，这样做，将选择器扩展到 div.content__article-body > *，使其以 div 的兄弟姐妹为目标，然后遍历结果。
子选择器 > 的使用允许排除 aside 中的任何元素，尽管这也会影响其他元素，并将它们的子元素带回输出，使用.outerHTML.
堆栈片段
$('div.content__article-body > *').not('aside').each( function( index, value ) {
console.log( value.outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content__article-body">
<p>some paragraph <span>some span</span></p>
<div>some div</div>
<aside>an aside <div>some div in aside</div></aside>
</div>
并使用 :not() 选择器。
堆栈片段
$('div.content__article-body > *:not(aside)').each( function( index, value ) {
console.log( value.outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content__article-body">
<p>some paragraph <span>some span</span></p>
<div>some div</div>
<aside>an aside <div>some div in aside</div></aside>
</div>