CSS Selectors (first, first-child, nth-child) Targeting Not Selecting in Javascript/Jquery

Question

I'm trying to target several td elements in jQuery using CSS Selectors.

I need the first element (td.calsun_days) to be a part of the click event adding the "selectedWeekend" class.
I need the 2nd, 3rd, 4th, and 5th td elements to be adding the class "notAllowed" to them upon page load. The issues that I'm having are that the elements are not targeting correctly for the "notAllowed" class. It's selecting tuesday through saturday, and only on click. The "selectedWeekend" class is being added to friday/saturday on click (only if the "notAllowed" code is not there), but not sundays. I've tried switching the order of the code but it didn't have any impact. I've tried targeting using first-child, first, nth-child(1), and nth-child(2). Thanks in advance for any help!

jQuery

jQuery(document).ready(
  function($) {
    var element = $('#afterbig1 td.czr-focus td');
    element.click(function() {
      if ($(this).is(":nth-last-child(2)") || $(this).is(":last-child") || $(this).hasAttribute('class')) {
        $(this).toggleClass("selectedWeekend");
      }
    });
    if (element.is(":nth-child()") || element.is(":nth-child(2)") || element.is(":nth-child(3)") || element.is(":nth-child(4)")) {
      element.addClass("notAllowed");
    }
  });

 @media only screen and (max-width : 640px) { 
    #views_tabs ,#drop_down_views
    {
        display:none;
    }

    #views_tabs_select
    {
        display:block !important;
    }
    }

    @media only screen and (max-width : 968px) { 
        #cats >li
        {
            float:none;
        }
    }

    .spider_categories{
        display:inline-block;
        cursor:pointer;
    }

    .spider_categories p{
        color: #fff;
        padding: 2px 10px !important;
        margin: 2px 0 !important;
        font-size: 14px;
        font-weight: 600;
    }
 
#cats #category
{
    text-decoration:underline;
    cursor:pointer;

}


    	
      
      
        
          
            		
              
                Day
                
                Week
                
                List
                
                Month
                
              
    
    
    
    Month
    
    
    
    
    
    Day
    
    
    
    
    	Week
    
    
    
    
    List
    
    
    
    
    Month
    
    
    
            
          
          
            
              
                
                  
                    
                      
                        
                          
                            
                              
                                
                                  2016
                                
                              
                              
                                ❰
                                
                              
                              
                                
                                November 2017 
                              
                              
                                ❱
                                
                              
                              
                                
                                  2018
                                
                              
                            
                          
                        
                      
                      
                                              
                            Su 
                          
                                            
                          Mo 
                        
                        
                          Tu 
                        
                        
                          We 
                        
                        
                          Th 
                        
                        
                          Fr 
                        
                        
                          Sa 
                        
                                          
                          
                          29
                                  
                          30
                                  
                          31
                                
                            1
                                  
                            2
                                  
                            3
                                  
                            4
                                  
                                
                            5
                                  
                            6
                                  
                            7
                                  
                            8
                                  
                            9
                                  
                            10
                                  
                            11
                                  
                                
                            12
                                  
                            13
                                  
                            14
                                  
                            15
                                  
                            16
                                  
                            17
                                  
                            18
                                  
                                
                            19
                                  
                            20
                                  
                            21
                                  
                            22
                              
                            23
                                  
                            24
                                  
                            25
                                  
                                
                            26
                                  
                            27
                                  
                            28
                                  
                            29
                                  
                            30
                                  1         2             
                      
            
                  
                
              
            
          
        

     10AM-10:30PM
    
    
    
     10AM-5PM
    
    
    
     7PM-10:30PM
    
    
    All categories

zer00ne · Accepted Answer

Update for WordPress Table

Added Demo 2 which is a fix for this particular table of this particular WordPress template. For a more general and sane answer see below for Demo 1.

90% of the elements have inline styles.

Properties that stylesheets, classes, and .css() cannot change by normal means
- color: #004B6C;
- padding: 0;
- margin: 0;
- line-height: 15px;
- vertical-align: top

If you wish to change these properties by external stylesheet or

Demo 2 - If the table is on a CMS or WordPress site

//[Get all  in the ]

/* Collect all 
 that are the only-child of 
|| a  and the  a decsendant of a 
|| into a NodeList then convert into an array
*/
var days = Array.from(document.querySelectorAll('tr td p:only-child'));

//[Set all  and 
 inline styles]

/* Run days array through .forEach()
|| on each loop:
|||Change the inline style of each 
 of days[]
|||Change the inline style of each  parent of 

|| *Note:* See post re: inline styles
*/
days.forEach(function(day, idx, days) {
  days[idx].style.cssText = "font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: cyan; width: 98%; position:absolute;";

  days[idx].parentNode.style.cssText = "color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2; border-left: 1px solid #CCD1D2;vertical-align:top;background:goldenrod;position:relative;";

});

//[Mark all .excluded cells]

/* Get all 
 that are the only child of a  which
|| is a 2nd, 3rd, 4th, or 5th decsendant of a 
||| On each 
 find its parent  and add 
|| .excluded class
*/
$('tr td:nth-of-type(n+2):nth-of-type(-n+5) p:only-child').each(function(index, wDay) {
  $(this).parent('td').addClass('excluded');
});

//[Mark each header .selected or .excluded]

/* On each td.weekdays (the headers) use .map()
|| to do the following:
||| Add .normal and .selected classes to the
|| first, sixth, and seventh  as well as
||| adding data-day attributes to them.
||| Add .excluded class to the rest
*/ 
$('td.weekdays').map(function(col, day) {
  if (col === 0 || col === 5 || col === 6) {
    $(this).addClass('selected normal');
    switch (col) {
      case 0:
        $(this).data('day', 'SUN');
        break;
      case 5:
        $(this).data('day', 'FRI');
        break;
      case 6:
        $(this).data('day', 'SAT');
        break;
    }
  } else {
    $(this).addClass('excluded');
  }
});

//[Mark all of the remaining cells .selected.normal] 

/* Go through each  parent  that do NOT
|| have the .excluded class and add .selected and
|| .normal class to them.
||| Because this template is overtly complex and
|| bad design, this table is inside a  so 
|| td.czr-focus does not need those classes
*/
$(days).parents('td').not('.excluded').each(function(index, wEnd) {
  $(this).addClass('selected normal');
  $('.czr-focus').removeClass('selected normal');
});

//[Mark the cells for Sunday, Friday, and Saturday]

/* .map() out each td.selected and add
|| .SUN, .FRI, or .SAT classes according to its
|| index position within $('td.selected')
*/
$('td.selected').map(function(idx, wEnd) {
  if ((idx + 3) % 3 === 0 && idx < 18) {
    $(this).addClass('SUN');
  } else if ([4, 7, 10, 13, 16, 19].includes(idx + 3)) {
    $(this).addClass('FRI');
  } else if ([5, 8, 11, 14, 17, 20].includes(idx + 3)) {
    $(this).addClass('SAT');
  } else {
    return false;
  }
});

//[Highlight a cell or column]

/* Delegate a click event on all td.selected
||| When clicked toggle the classes .highlight
|| and .normal.
||| Declare DAY as this 's particular
|| value of its data-day attribute
||| if this  has class .weekdays and 
|| .highlight, get all  that has the class
|| that matches data-day attribute value of
|| the clicked header (i.e. td.weekdays) and
|| add .highlight and remove .normal to all of
|| them.
||| if this is a header in default (i.e.
|| td.weekdays.selected.normal) do the reverse
*/
$('td.selected').on('click', function() {
  $(this).toggleClass('highlight normal');
  var DAY = $(this).data('day');
  if ($(this).is('.weekdays.highlight')) {
    $(`.${DAY}`).addClass('highlight').removeClass('normal');
  } else if ($(this).is('.weekdays.normal')) {

    $(`.${DAY}`).removeClass('highlight').addClass('normal');
  } else {
    return false;
  }
});

/* This makes all  display classList */

td::after {
  content: '['attr(class)']';
  color: red;
  font-size: 7px;
}

.weekdays,
.selected {
  cursor: pointer;
  pointer-events: auto;
}

.highlight {
  background: lime !important;
  border-color: magenta !important;
  outline: 4px solid magenta;
}

.normal {
  background: initial;
  border-color: initial;
  outline: none;
}


  
    
      
        
          
            
              
                
                  
                    
                      
                        
                          2016
                        
                      
                      
                        ❰
                                
                      
                      
                        
                        November 2017 
                      
                      
                        ❱
                                
                      
                      
                        
                          2018
                        
                      
                    
                  
                
              
            
            
              
                Su 
              
              
                Mo 
              
              
                Tu 
              
              
                We 
              
              
                Th 
              
              
                Fr 
              
              
                Sa 
              
            
            
              
                29
              
              
                30
              
              
                31
              
              
                1
              
              
                2
              
              
                3
              
              
                4
              
            
            
              
                5
              
              
                6
              
              
                7
              
              
                8
              
              
                9
              
              
                10
              
              
                11
              
            
            
              
                12
              
              
                13
              
              
                14
              
              
                15
              
              
                16
              
              
                17
              
              
                18
              
            
            
              
                19
              
              
                20
              
              
                21
              
              
                22
              
              
                23
              
              
                24
              
              
                25
              
            
            
              
                26
              
              
                27
              
              
                28
              
              
                29
              
              
                30
              
              
                1
              
              
                2

CSS Selectors (first, first-child, nth-child) Targeting Not Selecting in Javascript/Jquery

jQuery

Answers (2)

Update for WordPress Table

Demo 1 - For non-nested valid tables (most likely not on a CMS or WordPress site)

Demo 2 - If the table is on a CMS or WordPress site

Related Questions