Si quiere obtener el total de div's en su contenedor, sería suficiente con obtener el length
de la colección de elementos que retorna el selector de JQuery
, para su ejemplo el selector será, todos los elementos con la clase producto '.producto'
Sí desea añadir datos a sus elementos, lo ideal sería utilizar atributos de datos, (en Jquery el valor se obtiene con .data('identificador') , hará referencia a data-identificador="algunvalor" )
$("#caja").find('.producto').length
Ejm
$(function () {
$('#productos').on('click','.producto',function() {
var e = $(this).clone();
var identificador = $(this).data("identificador");
if($("#caja").find("."+identificador).length){
alert("Ya fue añadido");
}else{
$(e).appendTo('#caja');
}
$('#quanty').text("Actualmente hay " + $("#caja").find('.producto').length + " DIV's");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="productos" style='background: #ddd; width: 50%;'>
<div class="producto 1" data-identificador="1">producto 1</div>
<div class="producto 2" data-identificador="2">producto 2</div>
<div class="producto 3" data-identificador="3">producto 3</div>
</div>
<div id="caja" style='background: #000; color: #fff; width: 50%;'></div>
<!-- quiero que la cantidad se muestre dentro de esta etiqueta -->
<span id='quanty'></span>
Sí desea tener botones independientes para agregar los div's , puede cambiar el listener para que tenga como elemento padre el document
, posteriormente utilizando los atributos data , obtener el elemento para añadir. (código explicado)
$(function () {
//escuchamos el evento click del botón con la clase btnappend
// estos botones tendrán un atributo data div que hará referencia al
//data-identificador para obtener el elemento
$(document).on('click','.btnappend',function() {
var identificador = $(this).data('div');
//cuidado si no seleccione su div productos, puede tener comportamiento
// no deseado, añadiendo más de 1 elemento por click ;)
var e = $(`#productos [data-identificador='${identificador}']`).clone();
$(e).appendTo('#caja');
$('#quanty').text("Actualmente hay " + $("#caja").find('.producto').length + " DIV's");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="productos" style='background: #ddd; width: 50%;'>
<div class="producto 1" data-identificador="1">producto 1</div>
<div class="producto 2" data-identificador="2">producto 2</div>
<div class="producto 3" data-identificador="3">producto 3</div>
</div>
<button class="btnappend" data-div="1">Agregar P1</button>
<button class="btnappend" data-div="2">Agregar P2</button>
<button class="btnappend" data-div="3">Agregar P3</button>
<div id="caja" style='background: #000; color: #fff; width: 50%;'></div>
<!-- quiero que la cantidad se muestre dentro de esta etiqueta -->
<span id='quanty'></span>