Count Anzahl der ersten Schicht/Set von Kindern in geklonte Element

Question

Ich versuche, die Zahl der es zu zählen, ist die erste Schicht von Kindern ohne es Kind Kind Kind .. Diese meine Codes ist

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); 
}); 

die Warnung sollte immer 1 zurückkehren, da das geklonte Element in der es angehängt wird.

jsFiddle

Ich versuchte ..

.find() sondern auch als ich erwartet hatte, es wird alles in der es .. Kind des Kindes der Kinder zählen und so weiter .. .

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

Aber immer noch nicht bekommen, was ich will.

Ich denke bereits an das Hinzufügen eines Namens/einer Klasse, die ihnen angibt. Wie btn-container first-children ..

Aber ich frage mich, ob es einen jQuery-Trick gibt, der es einfacher machen wird.

Answer 1

Anstatt find() Sie children() nutzen könnten. Von jQuery .children()documentation:

Die .children() Methode unterscheidet sich von .find() in diesem .children() nur reist einzigen Ebene auf der DOM-Baum während .find() unten mehreren Ebenen durchqueren können Nachkommen Elemente (Enkel, etc.) wählen sowie

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

Answer 2

find('.btn-container') wählt alle Nachkommen .btn-container. Sie sollten den direkten Kinderselektor > wie folgt verwenden.

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

<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>