Jquery 嵌套 class 选择器

Question

假设我有以下 HTML:

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

无法预测什么标记将 div 与 class 分开。

我想要一个 jquery select 或在 parent 元素之后获取第一个嵌套的 child 元素，但不需要更深嵌套的 child 元素.在示例中，我想要第一个 child div 而不是第二个

我不能使用 .parent > .child 因为中间有 div.

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

我不能使用 .parent .child，因为那样会占用第二个 child。

有没有办法 select 为某些给定 class 的非直系子级而不选择更深层嵌套的子级？

Answer 1

我认为您正在寻找 $('.parent .child').first() 或 $('.parent .child:first')，它们是等价的。

Answer 2

您可以使用 .filter() method to filter through the .child elements and then determine if the .child element has a parent with class .child using the .parentsUntil() method.

这样做时，您可以有条件地 return 仅当元素位于顶层时。

Example Here

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

Answer 3

以下选择器适合我：

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

JSFiddle example

Answer 4

我会回显，以过滤掉不需要的 .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 嵌套 class 选择器

Jquery selector for nested class

jquery

jquery-selectors