¿Hay alguna forma de contar el número total de divisiones secundarias dentro de la división principal con Jquery? Quiero contar el div total dentro del div con el grupo de formularios de clase, pero este div debería tener un lienzo. por ejemplo, quiero devolver el recuento para el tercer div solo porque tiene un elemento de lienzo y tiene dos lienzos, por lo que debería devolver 2. tiene data-column="1" and data-column="2" . si este div tuviera 3 lienzos seguidos, tendría data-column="1", data-column="2" and data-column="3" para cada div
encuentra el div que tiene el elemento canvas
cuente el número total de lienzos con class="form-group" tercera división debe devolver 2 y la cuarta división debe devolver 1 ya que la 3rd división tiene 2 lienzos y la 4th división tiene 1 lienzo.
<div class="form-group" data-row="1"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <label class="control-label mb5">Name</label> <input class="form-control" type="text"/> </div> </div> </div> <div class="form-group" data-row="2"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <label class="control-label mb5">Email Address</label> <input class="form-control" type="text"/> </div> </div> </div> //3rd div <div class="form-group" data-row="3"> <div class="row"> <div class="trip-field col-sm-6" data-column="1"> <canvas class="mycan-1" width="463" height="675"></canvas> </div> <div class="trip-field col-sm-6" data-column="2"> <canvas class="mycan-2" width="463" height="675"></canvas> </div> </div> </div> //4th div <div class="form-group" data-row="4"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <canvas class="mycan-1" width="463" height="675"></canvas> </div> </div> </div> $('div.form-group') .filter((idx, div) => $(div).find('canvas').length > 0) .each((idx, div) => { let that = $(div); let row = that.data('row'); console.log('div row#' + row + ' canvas child amount:' + that.find('canvas').length); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group" data-row="1"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <label class="control-label mb5">Name</label> <input class="form-control" type="text"/> </div> </div> </div> <div class="form-group" data-row="2"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <label class="control-label mb5">Email Address</label> <input class="form-control" type="text"/> </div> </div> </div> <!-- 3rd div --> <div class="form-group" data-row="3"> <div class="row"> <div class="trip-field col-sm-6" data-column="1"> <canvas class="mycan-1" width="463" height="675"></canvas> </div> <div class="trip-field col-sm-6" data-column="2"> <canvas class="mycan-2" width="463" height="675"></canvas> </div> </div> </div> //4th div <div class="form-group" data-row="4"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <canvas class="mycan-1" width="463" height="675"></canvas> </div> </div> </div>Puedes hacerlo:
$(".form-group").each(function() { const row = $(this).data("row"); console.log( "row",row,":", $("canvas",this).length) }); // or const $rows = $(".form-group").filter(function() { return $(this).find("canvas").length > 0 }) // here we have all the divs with canvas children .map(function() { return $(this).data("row"); }) .get(); // here we have the array of data-row values from the divs with canvase children console.log($rows) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="form-group" data-row="1"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <label class="control-label mb5">Name</label> <input class="form-control" type="text" /> </div> </div> </div> <div class="form-group" data-row="2"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <label class="control-label mb5">Email Address</label> <input class="form-control" type="text" /> </div> </div> </div> //3rd div <div class="form-group" data-row="3"> <div class="row"> <div class="trip-field col-sm-6" data-column="1"> <canvas class="mycan-1" width="463" height="675"></canvas> </div> <div class="trip-field col-sm-6" data-column="2"> <canvas class="mycan-2" width="463" height="675"></canvas> </div> </div> </div> //4th div <div class="form-group" data-row="4"> <div class="row"> <div class="trip-field col-sm-12" data-column="1"> <canvas class="mycan-1" width="463" height="675"></canvas> </div> </div> </div>