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

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

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

2. 計算 第 3 個 div的畫布總數 應回傳 2，第 4 個 div 應回傳 1，因為3rddiv 有 2 個畫布，而 4thdiv 有 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>
   

uj5u.com熱心網友回復：

你可以這樣做：

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

uj5u.com熱心網友回復：

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

標籤：javascript html 查询

上一篇：在js/jQuery中創建物件會創建undefined

下一篇：Javascript無法訪問加載了php的元素