Question

我知道这已被多次询问，我已经尝试了所有的建议，并阅读了所有关于不同的选择器等等，但没有什么对我有用

给出以下HTML：

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

我想选择第一个div＆lt; a＆gt;标签，但没有从第二个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是＆lt; a＆gt;标签不是第二个div的直接子节点（例如，它们周围有字体标签等）但我无法排除第二个div。

Answer 1

您是否尝试过子选择器>？

div.class1 > p > a

将仅选择class1的直接后代。

如果你需要一个更广泛的规则，我想你只需要在你的一个例子中添加一个空格：

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

从评论中更新：这有效：

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

Answer 2

如果出现同样的问题，可能存在任意数量的元素，我的解决方案是：

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

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

Answer 3

嗯，这取决于您的确切需求，但这可以工作 - 它选择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);

找到您班级中的所有链接，并在任何级别删除其他<div>中包含的链接。你写的那么短，你会用：

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

Answer 4

如果您将child selector E > F而不是descendant selector E F与元素名称结合使用，则只能获得所需的元素，例如：

.class1 > p > a

Answer 5

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

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

没有别的东西对我有用。感谢你的帮助，虽然这里的许多答案都有效，但是第一个div在第二个div之前可以包含任意数量的子元素（或者根本没有），而第二个div可以包含任意数量的子元素。标签我试图过滤掉

jquery：排除孩子

5 个答案: