CODEWITHSUNDEEP
jqueryhtml-table
wbdlc
wbdlc

Reputation: 1089

Loop through table td's to detect child div class

I am trying to loop through all td cells on my table.

The td's contain div's, I need to search each of these div classes to detect a class 'ws_is_all_day_event', if the class is detected I need to add another class 'ws_has_all_day_event' to the parent td.

Currently I can only get this to apply the extra class to all td's, not the specific td column.

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


             })

        })

Stupidly, what am I missing here?

Upvotes: 0

Views: 2088

Answers (6)

prog1011
prog1011

Reputation: 3495

Try This Code- You need to use .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

Upvotes: 0

Jai
Jai

Reputation: 74738

You just need one liner for this:

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

This line: jQuery('#myTable').find('.demo-class.ws_is_all_day_event') finds the element with the both classes applied on it. If it finds one then it traverses up the adds the class to the .closest('.ws_is_single_day_header') closest element with this class .ws_is_single_day_header and then adds the 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>

Upvotes: 1

Manwal
Manwal

Reputation: 23836

Consider following Code:

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

Working DEMO

Here is Complete Jquery Code:

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

Upvotes: 0

Ariel
Ariel

Reputation: 1436

you could find all divs with 'ws_is_all_day_event', then find the parent and apply the 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')                  
                 })

            })

An example to see how it works http://jsfiddle.net/a0eak3w6/. Hope it helps.

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

Try this: iterate all tds to check if it has any div having ws_is_all_day_event with class="demo-class" then add ws_has_all_day_event to its parent 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");
      }
    });
});

Upvotes: 0

Jamiec
Jamiec

Reputation: 136174

You've made this waaaay overcomplicated, You don't need any loops whatsoever.

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

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

Upvotes: 0

Related Questions