计算单元格中的 div 并添加样式

Question

目前，我正在使用一个时间表插件，它将时间 tables 构建为 table。根据客户的要求，他们希望能够同时拥有两个 class。为了促进这一点，我需要计算一个单元格中是否有两个 div 实例。如果单元格中有两个实例，将应用样式以允许每个实例占据单元格中 space 的一半并彼此相邻浮动。目前，最好的方法似乎是使用 JQuery。

这是生成的 table 的示例：

 <table>
        <tr>
          <th class="wcs3-ex1-hour-row-19-00">19:00</th>
          <td class="wcs3-cell wcs3-hour-row-19-00 wcs3-day-col-1 wcs3-abs-col-0">
            <div class="wcs3-ex1-td-relative">
              <div class="wcs3-class-container wcs3-ex1-cell-wrapper wcs3-ex1-19-00-20-00-1" style="height: 139.59375px;">
                <div class="wcs3-class-name">Piloxing</div>
                <div class="wcs3-details-box-container"><span class="wcs3-qtip-box"><a href="#qtip" class="wcs3-qtip" data-hasqtip="96">Piloxing</a><span class="wcs3-qtip-data">A muscle-toning, fat-burning cardio fusion that blends the power, speed &amp; agility of boxing with exhilarating dance moves and the targeted sculpting and flexibility of pilates to burn maximum calories, build lean muscle &amp; increase stamina, leaving you feeling physically &amp; mentally empowered.</span></span>


                  19:00 to 20:00</div>
                <div class="wcs3-ex1-bottom-border" style="height: 1px; background-color: rgb(255, 255, 255);"></div>
              </div>
            </div>
            <div class="wcs3-ex1-td-relative">
              <div class="wcs3-class-container wcs3-ex1-cell-wrapper wcs3-ex1-19-00-20-00-1" style="height: 139.59375px; background-color: rgb(0, 50, 199);">
                <div class="wcs3-class-name">Spinning</div>
                <div class="wcs3-details-box-container"><span class="wcs3-qtip-box"><a href="#qtip" class="wcs3-qtip" data-hasqtip="97">Spinning</a><span class="wcs3-qtip-data">Using indoor stationary bikes, class participants will experience a fun, challenging &amp; exhilarating workout. The instructor will lead and motivate you through a series of phases on your bike but you can control the intensity at which you work.</span></span>


                  19:00 to 20:00</div>
                <div class="wcs3-ex1-bottom-border" style="height: 1px; background-color: rgb(255, 255, 255);"></div>
              </div>
            </div>
          </td>
          <td class="wcs3-cell wcs3-hour-row-19-00 wcs3-day-col-2 wcs3-abs-col-1">
            <div class="wcs3-ex1-td-relative">
              <div class="wcs3-class-container wcs3-ex1-cell-wrapper wcs3-ex1-19-00-20-00-2" style="height: 139.59375px;">
                <div class="wcs3-class-name">SalsaTone</div>
                <div class="wcs3-details-box-container"><span class="wcs3-qtip-box"><a href="#qtip" class="wcs3-qtip" data-hasqtip="98">SalsaTone</a><span class="wcs3-qtip-data">A dance fitness workout that uses steps from the salsa, cha cha &amp; samba, fused with aerobic moves to improve cardiovascular fitness as well as toning your whole body.</span></span>


                  19:00 to 20:00</div>
                <div class="wcs3-ex1-bottom-border" style="height: 1px; background-color: rgb(255, 255, 255);"></div>
              </div>
            </div>
          </td>
          <td class="wcs3-cell wcs3-hour-row-19-00 wcs3-day-col-3 wcs3-abs-col-2">
            <div class="wcs3-ex1-td-relative">
              <div class="wcs3-class-container wcs3-ex1-cell-wrapper wcs3-ex1-19-00-20-00-3" style="height: 139.59375px; background-color: rgb(0, 50, 199);">
                <div class="wcs3-class-name">Spinning</div>
                <div class="wcs3-details-box-container"><span class="wcs3-qtip-box"><a href="#qtip" class="wcs3-qtip" data-hasqtip="99">Spinning</a><span class="wcs3-qtip-data">Using indoor stationary bikes, class participants will experience a fun, challenging &amp; exhilarating workout. The instructor will lead and motivate you through a series of phases on your bike but you can control the intensity at which you work.</span></span>


                  19:00 to 20:00</div>
                <div class="wcs3-ex1-bottom-border" style="height: 1px; background-color: rgb(255, 255, 255);"></div>
              </div>
            </div>
          </td>
          </table>

这里是我认为会在每个单元格内计数的 JQuery，如果带有标记 class 的 div 的计数大于 1，它将应用样式该单元格内的 divs：

$(".wcs3-cell").each(function() {
  var n = $("tbody > tr > td > div.wcs3-ex1-td-relative > div.wcs3-class-name").length;
  if (n > 1) {
        //alert('boom')
    $("div.wcs3-ex1-td-relative").css("background", "yellow");
    } 
    else {
    //alert('boom')
        $("div.wcs3-ex1-td-relative").css("background", "orange");
    }
});

目前，returns 正在使所有 div 变成橙色。在此先感谢您的帮助:)

Answer 1

试试这个：

$(".wcs3-cell").each(function() {
    var n = $(this).find("div.wcs3-class-name").length;
    if (n > 1) {
        $(this).find("div.wcs3-ex1-td-relative").css("background", "yellow");
    } 
    else {
        $(this).find("div.wcs3-ex1-td-relative").css("background", "orange");
    }
});

计算单元格中的 div 并添加样式

Counting the divs in a cell and adding styling

html

javascript

css

jquery

cells