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