使用jQuery計算父div內的總元素

Question

有沒有辦法用Jquery計算主div內的子div總數？ 我想用 class form-group 計算 div 內的總 div，但這個 div 應該有畫布。 例如，我只想返回第三個 div 的計數，因為它有元素畫布並且它有兩個畫布，所以它應該返回 2。它有data-column="1" and data-column="2" 。 如果此 div 連續有 3 個畫布，則每個 div 都會有data-column="1", data-column="2" and data-column="3"

1. 找到具有元素畫布的 div

2. 計算class="form-group"的畫布總數第 3 個 div 應返回 2，第 4 個 div 應返回 1，因為第3rd div 有 2 個畫布， 4th div 有 1 個畫布。

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

Answer 1

你可以這樣做：

 $(".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>

Answer 2

 $('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>