从jquery php中的每个div计算数字类答案

【问题标题】：Counting number classes from each div in jquery php从jquery php中的每个div计算数字类
【发布时间】：2023-03-25 08:37:01
【问题描述】：

我有类名bus的div在foreach循环php中重复

<div class="bus" id="result1">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="505" uniq-id="1452746805">
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746801">
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746823">
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746839">
  </div>
</div>

<div class="bus" id="result2">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="501" uniq-id="1452746803">
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746802">
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746804">
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746801">
  </div>
</div>
  .....
  .....
  <div class="bus" id="resultn">
     .....
     ....
  </div>

当单击类seat 的div 时，会添加一个类green 我想用 bus 类计算每个 div 中的 green 类。这是我的代码

$(document).on("click",".seat",function(){
   var total_class = $('.green').length;
})

问题是我从所有具有 bus 类的 div 中获取 green 类的总数

更新

当单击具有班级座位的 div 时，我想将数据编号属性值分别放入每个班级总线的数组中，稍后将其用于一些数据库操作。

这是我的代码

$(document).on("click",".seat",function(){

  var temp=[];
  var seat_no = $(this).attr("data-number");
  temp.push(seat_no);

}

问题是我从所有具有类总线的 div 中获取所有数据编号属性

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

使用parent() 方法访问您单击的那个元素上的父级，这样您就可以获得类.green 的实例数

var total_class = 0;    

$(document).on("click",".seat",function(){
    total_class = $(this).parent().children('.green').length
})

【讨论】：

很好，它解决了您的问题。关于更新，如果这是一个新问题，请考虑在此发布一个新的单独主题。谢谢！ :)

【解决方案2】：

试试这个：

在这种情况下

您需要选择被点击元素的父元素 .bus 在你的情况下。
从父级找到其具有.green 类的子级并获取其计数

这就是我在这段代码中所做的：

var total_class = $(this).parent('.bus').children('.green').length;

演示：

    $(document).on("click", ".seat", function() {
      $(this).addClass('green');
      var total_class = $(this).parent('.bus').children('.green').length;
      alert(total_class);
    })

.red {
  color: red
}
.green {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bus" id="result1">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="505" uniq-id="1452746805">b1
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746801">b1
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746823">b1
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746839">b1
  </div>
</div>
<hr>
<div class="bus" id="result2">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="501" uniq-id="1452746803">b2
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746802">b2
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746804">b2
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746801">b2
  </div>
</div>

【讨论】：

【解决方案3】：

试试这个：

 $(document).on("click",".seat",function(){
    var total_class = $(this).parent().find('.green').length;
 });

【讨论】：

【解决方案4】：

$(document).on("click",".seat",function(){
   var total_class = $(this).closest(".bus").find('.green').length;
})

这将在同一总线上为您提供具有绿色类的总 div

【讨论】：

【解决方案5】：

$(document).ready(function(){
    $('.seat').click(function(){
        $(this).parent().addClass('green');
        get_number_with_class('green');
    });
});

function get_number_with_class(classname)
{
    var total_class = $('div.'+classname).length;
}

对我有用

【讨论】：

【解决方案6】：

$(document).ready(function () {
           $('.seat').click(function () {
           $(this).addClass('green');
          // $('#total').val($('.bus').find('div.green').length);

           szTotal = $('.bus').find('div.green').length;

           szResult = "Total no of green class in current div (id=" + $(this).closest('div.bus').attr('id') + ") = " + $(this).closest('div.bus').find('div.green').length

           szResult = szResult + "<br>" + "Total green class in All Div=" + szTotal

           alert(szResult)
       });
   });

【讨论】：