Is there any way to count the total number of child div inside the main div with Jquery?
I want to count total div inside div with class form-group but this div should have
canvas. for example I want to return count for third div only since it has element canvas
and it has two canvas so it should return 2.
it has data-column="1" and data-column="2". if this div had 3 canvas in a row it would have
data-column="1", data-column="2" and data-column="3" for each div
find the div that has element canvas
count the total number of canvas with class="form-group"
3rd div should return 2 and the 4th div should return 1 since the 3rd div has 2 canvas and
4th div has 1 canvas.
<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>You can do this:
$(".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>