Question

这个很棘手。我还没有在这里发过问题。始终能够找到我使用谷歌的所有问题的答案，但不能找到这个。

我想在这个样本中完成的是选择＆＃34;第一级＆＃34;具有类.mb-ctrl.

的div＃main-wrapper的后代

＆＃34;第一级＆＃34;后代是div，类.mb-ctrl的最近父级是#main-wrapper。在这个例子中＆＃34;第一级＆＃34; #main-wrapper的后代是#enclosing1和#input2，但不是#input1，因为它包含在另一个.mb-ctrl中。

＆＃13;

<div id="main-wrapper" class="mb-ctrl mb-frame">
  <div id="enclosing1" class="mb-ctrl">
    <div id="input1" class="mb-ctrl mb-input">
    </div>
  </div>
  <div>
    <div class="mb-whatever">
      <div id="input2" class="mb-ctrl mb-input">
      </div>
    </div>
  </div>
</div>

＆＃13;

如果我使用此选择器$('#main-wrapper').find('.mb-ctrl')，我会获得所有.mb-ctrl个div。我不想要那个。

如果我使用这个选择器$("#main-wrapper").find('.mb-ctrl').not('.mb-ctrl .mb-ctrl')，我就没有div。我也不想要那样。

如果我使用此选择器$("#main-wrapper").children('.mb-ctrl')，我只会获得#enclosing1。我也不想要那样。

我知道我可以使用id-s来选择我需要的东西，但我的项目结构有不同的html，其他.mb-ctrl-s中包含数百万个.mb-ctrl-s，我想得到一个适用于所有情况的通用选择器。

Answer 1

You can use :first-child selector

Selects all elements that are the first child of their parent.

$("#main-wrapper .mb-ctrl:first-child")

jQuery(function($) {
  $("#main-wrapper .mb-ctrl:first-child").css('color', 'green')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-wrapper" class="mb-ctrl mb-frame">
  <div id="enclosing1" class="mb-ctrl">
    enclosing1
    <div id="input1" class="mb-ctrl mb-input">
      input1
    </div>
  </div>
  <div>
    <div class="mb-whatever">
      mb-whatever
      <div id="input2" class="mb-ctrl mb-input">
        input2
      </div>
    </div>
  </div>
</div>

Answer 2

$("#main-wrapper > .mb-ctrl")

Answer 3

Hi try this to get "first level" descendants for div "#main-wrapper" that have class ".mb-ctrl".

$(document).ready(function(){
    $("#main-wrapper>.mb-ctrl:first-child");
});

here ">" symbol used to get all the immediate child div's of the parent div, and ":first-child" will filter all the child div's and allowed only first child div.

选择＆＃34;第一级＆＃34;孩子们在jquery

3 个答案: