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

Question

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

这是生成的表格的示例:

 <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，如果带有标记类的 div 的数量大于 1，它将向该单元格内的 div 应用样式:

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

目前，所有这些返回都是让所有的 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");
    }
});