jQuery：排除子元素

Question

jQuery：排除子元素

9

我知道这个问题被问了很多次，我已经尝试了所有的建议，并阅读了有关不同选择器的所有内容，但对我来说什么都不起作用。

给定以下HTML代码：

<div class="class1">
  <p>
   <a>link</a>
  </p>
  <div class="class2 class3">
    <p>
      <font>
        <a>link2</a>
      </font>
    </p>
  </div>
</div>

我想选择第一个div中的<a>标签，但不选取第二个div中的任何内容

我已经尝试过：

$('.class1').not('.class2, .class3')
$('.class1').not('.class2')
$('.class1').not('.class3')
$(".class1:not(.class2)")
$(".class1:not(.class3)")
$(".class1:not(.class2, .class3)")
$("div.class1:not(.class2)")
$("div.class1:not(div.class2)")
$("div.class1:not(div.*)")

等等看，我不知道是因为第二个 div 有两个类名，还是因为第二个 div 的 <a> 标签不是第二个 div 的直接子元素（例如它们周围有字体标签之类的东西），但我无法排除第二个 div。

- null

4

FYI - "font"标签已被弃用：http://www.w3schools.com/tags/tag_font.asp - Dan Heberden

5个回答

7

我遇到了同样的问题，当许多元素会挡住视线时，我的解决方案是：

$('.class1').find("a").not(".class2 a, .class3 a").whatever;

基本上，获取所有内容，然后删除应该被“排除”的任何内容。

- Jonathan Regeimbal

2

好的，这取决于您的确切需求，但是以下内容可能有用- 它选择 div 元素，直接位于其下的 <p> 元素，然后选择其中的链接：

$('.class1 > p a')

为了找到除了嵌套在另一个<div>中的所有链接，您可以尝试以下操作：

var class1 = $(".class1");
var badLinks = class1.find('div a'); // or .class2 a, .class3 a
var goodLinks = class1.find('a[href$=jpg]').not(badLinks);

这段代码可以找到所有在你的class中的链接，并删除任何级别内包含在另一个<div>中的链接。如果你愿意，可以用更简短的方式来写：

class1.find('a[href$=jpg]').not(class1.find('div a'));

- Kobi

@null - 如果结构复杂，您可能需要类似于以下链接的内容：https://dev59.com/nU7Sa4cB1Zd3GeqP45pm - Kobi

为了更进一步使它复杂化，我不仅仅是选取任何一个a标签，而是在选择我想要的div类之后使用.find('a[href$=".jpg"]')。 - null

$('.class1 > p').find('a[href$=".jpg"]') 在 .class1 的第一个子元素是 p 时是正常工作的。有一种方法可以遍历给定的标签数组及其所有子元素，包括所有排列组合，但不包括任何子元素是 div 的情况吗？ - null

@kobi，这个最新版本的问题是它无法捕获class1.find('div p')，其中包含一个我不想包含的链接。 - null

原始问题中的示例甚至包含 <p>内部div可以包含任意数量的子元素，仅检查“div a”将无法找到嵌套在该DIV中进一步的a标签。 - null

显示剩余2条评论

1

如果您使用子选择器E > F而不是与元素名称结合使用后代选择器E F，则只会获取所需的元素，例如：

.class1 > p > a

- Gumbo

0

好的，终于找到了一个可接受的解决方案。

$('.class1').find('a[href$=".jpg"],a[href$=".png"],a[href$=".gif"]').each(function(){
if($(this).parents('div').attr('class') == 'class1'){do whatever}});

对我来说，其他方法都不起作用。虽然在这里的许多答案都可以使用，但第一个div可能包含任意数量的子元素（或根本没有），而第二个div可能在我试图过滤掉的a标签之前包含任意数量的子元素。

- null

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pekka · Accepted Answer

你尝试过子选择器> 吗？

div.class1 > p > a

将仅选择class1的直接子代。

如果您需要更广泛的规则，我认为您只需要在其中一个示例中添加一个空格：

$(".class1 :not(.class2) a")

更新自评论：这个可行：

$(".class1 > :not(.class2.class3) a").css('border','1px solid red');