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

1. find the div that has element canvas

2. count the total number of canvas with 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>
   

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

$('div.form-group').each((idx, element) => {
  let that = $(element);
  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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>