遍历 table td 以检测 child div class

Question

我正在尝试遍历 table 上的所有 td 单元格。

td 包含 div，我需要搜索每个 div classes 来检测 class 'ws_is_all_day_event'，如果检测到 class 我需要添加另一个 class 'ws_has_all_day_event' 到 parent td.

目前我只能得到这个来将额外的 class 应用到所有 td，而不是特定的 td 列。

My Code Pen Thus Far

   jQuery('#myTable').each(function () {

            jQuery('td', this).each(function () {

                if( jQuery('.demo-class').hasClass("ws_is_all_day_event") ) {
                    jQuery(".ws_is_single_day_header").addClass("ws_has_all_day_event");
                }


             })

        })

愚蠢的是，我在这里错过了什么？

Answer 1

你把这件事搞得太复杂了，你根本不需要任何循环。

$('#myTable td div.demo-class.ws_is_all_day_event').parent('td')
                                                   .addClass("ws_has_all_day_event");

http://codepen.io/anon/pen/gboVBL

Answer 2

试试这个：迭代所有 td 以检查它是否有任何 div 具有 ws_is_all_day_event 和 class="demo-class" 然后将 ws_has_all_day_event 添加到其父 td-

jQuery('#myTable').each(function () {
   jQuery('td', this).each(function () {
     //check if demo-class has ws_is_all_day_event
     if( jQuery('.demo-class',this).hasClass("ws_is_all_day_event") ) 
      {
          //here this refers to td
          $(this).addClass("ws_has_all_day_event");
      }
    });
});

Answer 3

考虑以下代码：

if( jQuery(this).find('.demo-class').hasClass("ws_is_all_day_event") ) {
     jQuery(this).addClass("ws_has_all_day_event");
}

Working DEMO

这里是完整的Jquery代码：

  jQuery('#myTable').each(function () {
      jQuery('td', this).each(function () {
          if (jQuery(this).find('.demo-class').hasClass("ws_is_all_day_event")) {
              jQuery(this).addClass("ws_has_all_day_event");
          }
      });
  });

Answer 4

你可以找到所有带有 'ws_is_all_day_event' 的 div，然后找到父级并应用 class 'ws_has_all_day_event'.

  jQuery('#myTable').each(function () {

                jQuery('.ws_is_all_day_event').each(function () {                   
                    jquery(this).parent().addClass('ws_has_all_day_event')                  
                 })

            })

查看其工作原理的示例http://jsfiddle.net/a0eak3w6/。希望对你有帮助。

Answer 5

为此你只需要一根衬垫：

jQuery('#myTable').find('.demo-class.ws_is_all_day_event')
                  .closest('.ws_is_single_day_header')
                  .addClass("ws_has_all_day_event");

此行：jQuery('#myTable').find('.demo-class.ws_is_all_day_event') 查找应用了两个 class 的元素。如果找到一个，则向上遍历，将 class 添加到具有此 class .ws_is_single_day_header 的 .closest('.ws_is_single_day_header') 最近的元素，然后添加 class ws_has_all_day_event.

jQuery('#myTable').find('.demo-class.ws_is_all_day_event').closest('.ws_is_single_day_header').addClass("ws_has_all_day_event");

.ws_has_all_day_event{font-weight:bold; color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
   <tr>
    <td>Mon</td>
    <td>Tues</td>
    <td>Wed</td>
   </tr>
   <tr>
    <td class="ws_is_single_day_header">
     <div class="demo-class">Event 1</div>
     <div class="demo-class ws_is_all_day_event">Event 2</div>
     <div class="demo-class">Event 3</div>
    </td>
    <td class="ws_is_single_day_header">
     <div class="demo-class">Event 1</div>
     <div class="demo-class">Event 2</div>
     <div class="demo-class">Event 3</div>
     <div class="demo-class">Event 1</div>
     <div class="demo-class">Event 2</div>
     <div class="demo-class">Event 3</div>
    </td>
    <td class="ws_is_single_day_header">
     <div class="demo-class">Event 1</div>
     <div class="demo-class">Event 3</div>
    </td>
   </tr>
  
  </table>

Answer 6

试试这个代码- 你需要使用 .hasClass(),.addClass() and .closest()

$(function(){   
    $('#myTable tr td div').each(function () {      

        if($(this).hasClass("ws_is_all_day_event"))
        {
            $(this).closest('td').addClass("ws_has_all_day_event");
        }

    });
});

Working Demo Here

遍历 table td 以检测 child div class

Loop through table td's to detect child div class

jquery

html-table