计算克隆元素中第一层/子集的数量

Question

我正在计算它的第一层儿童的数量不包括它的孩子的孩子... 这是我的代码

HTML

<div class="container">
  <div class="row">
    <div class="btn-container col-md-12">
      <a href="#">Hello</a>
    </div>
  </div>
</div>

JS

$('a').click(function(){
    var c = $(this).closest('.row').clone();
  $(this).after( c );
  var count = $(this).closest('.row').find('.btn-container').length;
  alert(count);
});

警告应始终返回1，因为克隆元素会附加在其中。

jsFiddle

我试过..

.find()但也如我所料，它将计算其中的所有内容。孩子的孩子等等......

var parent = $(this).closest('.row');
var count = $('.btn-container', parent).length;

但仍然无法得到我想要的东西。

我已经考虑过为它们添加一个名称/类。像btn-container first-children ..

但我想知道是否有一个jQuery技巧会让它更简单。

Answer 1

find('.btn-container')将选择所有后代.btn-container。您应该使用直接子选择器>，如下所示。

＆＃13;

＆＃13;

$('a').click(function () {
    var c = $(this).closest('.row').clone();
    $(this).after(c);
    var count = $(this).closest('.row').find('>.btn-container').length;
    //---------------------------------------^^--------------------
    alert(count);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="btn-container col-md-12">
      <a href="#">Hello</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

而不是find()您可以使用children()。来自jQuery .children() this question：

  

.children（）方法与.find（）的区别仅在于.children（）   在.sind（）可以遍历时沿DOM树向下移动一个级别   在多个级别选择后代元素（孙子，   等）

var count = $(this).closest('.row').children('optional-selector').length;