Question

假设我有以下HTML：

<div class="parent">
  <div>
    <div class="child">
      <div>
        <div class="child">
        </div>
      </div>
    </div>
  </div>
</div>

无法预测标记将div与类别区分开来。

我想要一个jquery选择器，它在child元素之后获取第一个嵌套的parent元素，但不是更深层嵌套的child元素。在示例中，我想要第一个child div而不是第二个。

由于干预.parent > .child。

，我无法使用div

我无法使用.parent > div > .child，因为干预div是不可预测的。

我无法使用.parent .child，因为这会占用第二个child。

有没有办法选择某个给定类的非直接子级而不选择更深层次的嵌套类？

Answer 1

您可以使用.filter() method来过滤.child元素，然后使用.parentsUntil() method确定.child元素是否包含类.child的父级

这样做，只有当元素位于顶层时才能有条件地返回元素。

Example Here

var $element = $('.parent .child').filter(function() {
    return !$(this).parentsUntil('.parent', '.child').length;
});

Answer 2

我认为您正在寻找等效的$('.parent .child').first()或$('.parent .child:first')。

Answer 3

以下选择器对我有用：

$('.parent .child:not(.child .child)')

JSFiddle example

Answer 4

我会回复Josh's suggestion，过滤掉不需要的.child元素，但使用.not()方法：

$('.parent .child').not('.child .child')

$('.parent .child').not('.child .child').css('border-color', 'red');

div {
  width: 80%;
  box-sizing: border-box;
  min-height: 5vh;
  border: 1px solid #000;
  margin: 0.5em auto;
}

div[class]::before {
  content: attr(class);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>
    <div class="child">
      <div>
        <div class="child">
        </div>
      </div>
    </div>
  </div>
</div>

或:not()选择器：

$('.parent .child:not(".child .child")')

$('.parent .child:not(".child .child")').css('border-color', 'red');

div {
  width: 80%;
  box-sizing: border-box;
  min-height: 5vh;
  border: 1px solid #000;
  margin: 0.5em auto;
}

div[class]::before {
  content: attr(class);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>
    <div class="child">
      <div>
        <div class="child">
        </div>
      </div>
    </div>
  </div>
</div>

或者filter()：

$('.parent .child').filter(function(){
    return $(this).parents('.child').length === 0;
});

$('.parent .child').filter(function() {
  // retains only those .child elements who
  // have no parents matching the '.child' selector:
  return $(this).parents('.child').length === 0;
}).css('border-color', 'red');

div {
  width: 80%;
  box-sizing: border-box;
  min-height: 5vh;
  border: 1px solid #000;
  margin: 0.5em auto;
}
div[class]::before {
  content: attr(class);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>
    <div class="child">
      <div>
        <div class="child">
        </div>
      </div>
    </div>
  </div>
</div>

参考文献：

嵌套类的Jquery选择器

4 个答案: