Question

我对尝试选择元素时使用哪个jQuery方法和/或选择器感到有点困惑，然后从包装集中删除某些后代元素。

例如，给定以下HTML：

<div id="article">
  <div id="inset">
    <ul>
      <li>This is bullet point #1.</li>
      <li>This is bullet point #2.</li>
      <li>This is bullet point #3.</li>
    </ul>
  </div>
  <p>This is the first paragraph of the article</p>
  <p>This is the second paragraph of the article</p>
  <p>This is the third paragraph of the article</p>
</div>

我想选择文章：

var $article = $('#article');

但随后从包装集中删除<div id="inset"></div>及其后代。我尝试了以下方法：

var $article = $('#article').not('#inset');

但这没有用，回想起来，我想我能明白为什么。我也尝试使用remove()失败了。

这样做的正确方法是什么？

最终，我需要以可以定义配置数组的方式进行设置，例如：

var selectors = [
  {
    select: '#article',
    exclude: ['#inset']
  }
];

其中select定义包含文本内容的单个元素，exclude是一个可选数组，用于定义一个或多个选择器以忽略文本内容。

鉴于删除了排除元素的最终包装集，我希望能够调用jQuery的text()方法，最终得到以下文本：

这是本文的第一段。
这是本文的第二段。
这是本文的第三段。

配置数组不需要完全相同，但它应该提供大致相同的配置潜力。

感谢您提供的任何帮助！

Answer 1

我想您不想通过从中删除元素来修改原始HTML，但是您只想获取没有插入的文章内容。这就是为什么我会使用clone（）获取文章的副本，然后从中删除插入内容。

像这样：

$("#article").clone().find("#inset").remove().end().text()

$（“＃article”）选择文章div，clone创建一个复制，
找到孩子们删除（你也可以使用孩子），
删除（），删除所选的插图
end（）返回原始选择。

最后我刚刚添加了text（），就像你提到的那样。

Answer 2

如果你想删除#article中的任何内容，但是#inset使用：

$('#article > *:not(#inset)').remove() // selects all direct children of #article but not #inset and removes them

在此处查看示例：http://jsfiddle.net/zwPsD/

如果要将此规则应用于多个DOM元素，您可以链接它们：

$('#article, #article2, #article3, #etc').find('> *').not('#inset, #that, #and. #there').remove()

你可以在这里找到一个例子： http://jsfiddle.net/ZNjdE/

并且每个都可以提取文本： http://jsfiddle.net/ZNjdE/2/

Answer 3

尝试这样的事情。

$('#article').children(':not(#inset)').each(function(){
    alert($(this).text());
});

如果你想用一个对象：

var selectors = {
    select: '#article',
    exclude: ['#inset', 'p']
};

$(selectors.select).children(':not('+selectors.exclude.join(',')+')').each(function(){
    alert($(this).text());
});

修改

要获得任何级别的祖先，您可以添加额外的选择器并使用find()。例如

$('#article').find('li:first, :not(#inset, #inset *)').each(function(){ alert($(this).text()); });

有了这个，除了第一个#inset之外，你将排除#inset和所有li的祖先。它之前的selectors对象不太适用，因为你排除了一组元素，然后包括一些被排除的元素。您可以使用对象中的三个元素来执行此操作：

var selectors = {select: ... , exclude: ... , includeFromExcluded: ...};

Answer 4

除非我遗漏了某些内容，为什么不能选择文章div中的所有<p>元素？

$("#article p")

如果这是不可接受的，我认为您正在寻找filter功能......

$("#article").filter(":not(#inset)")

注意：你可以在：not（）选择器中有多个选择器。它们只需要用逗号分隔，因此这种方法可以满足您的配置需求。

如何从jQuery包装集中删除后代元素？

4 个答案: