Question

我试图遍历我桌子上的所有td单元格。

td包含div，我需要搜索每个div类来检测一个类＆ws_is_all_day_event＆＃39;如果检测到类我需要添加另一个类＆＃39; ws_has_all_day_event＆＃39;到父母td。

目前我只能将此额外课程应用于所有td，而不是特定的td列。

   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

你只需要一个衬垫：

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')找到应用了两个类的元素。如果它找到一个然后遍历，则将该类添加到.closest('.ws_is_single_day_header')最接近的元素.ws_is_single_day_header，然后添加类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 2

你已经使这个过于复杂，你不需要任何循环。

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

尝试此操作：迭代所有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 4

请考虑以下代码：

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 5

您可以使用'ws_is_all_day_event'找到所有div，然后找到父级并应用类'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 6

试用此代码您需要使用.hasClass()，.addClass()和.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

循环通过表td来检测子div类

6 个答案: