Question

Unusual Javascript Behavior with :nth-child Selector in Version 11

Version 11 Forms

Updated April 26, 2022

asked on April 25, 2022

I've encountered some usual behavior in version 11 that I'm hoping someone can help me understand why it is doing what it is doing.

I have a form with a bunch of different checkbox elements on it. Each checkbox has multiple different options under it with different values. Based on the employee's "Job Category" the checkbox options that apply to their position are shown and the others are hidden.

I'm handling this via the :nth-child selector on the choice class in Javascript. This is working well in version 10.2, but in version 11 (specifically update 2), it's behaving in an unusual manner.

Here's a simplified version of my code, which hides three checkbox options and then only shows the specific item that applies based on the value in the jobCategory field:

$(document).ready(function () {
  
  $('.crossSaleCheckbox').each(function() { 
    $(this).find('.choice:nth-child(1)').hide(); 
    $(this).find('.choice:nth-child(2)').hide(); 
    $(this).find('.choice:nth-child(3)').hide(); 
  });
  if ($('.jobCategory input').val() == 'Executive') { 
    $('.crossSaleCheckbox .choice:nth-child(1)').each(function() { 
      $(this).show(); 
    });
  }
  else if ($('.jobCategory input').val() == 'Manager') { 
    $('.crossSaleCheckbox .choice:nth-child(2)').each(function() { 
      $(this).show(); 
    });
  }
  else if ($('.jobCategory input').val() == 'HR') { 
    $('.crossSaleCheckbox .choice:nth-child(3)').each(function() { 
      $(this).show(); 
    });
  }
  
});

That code is working as expected in version 10.2.

However, in version 11, it seems to be off by 1. If I change all the :nth-child selectors from 1-->2, 2-->3, and 3-->4, then it works as expected. It's like it is starting the counter at 2 instead of 1...

This modified code works in version 11:

$(document).ready(function () {
  
  $('.crossSaleCheckbox').each(function() { 
    $(this).find('.choice:nth-child(2)').hide(); 
    $(this).find('.choice:nth-child(3)').hide(); 
    $(this).find('.choice:nth-child(4)').hide(); 
  });
  if ($('.jobCategory input').val() == 'Executive') { 
    $('.crossSaleCheckbox .choice:nth-child(2)').each(function() { 
      $(this).show(); 
    });
  }
  else if ($('.jobCategory input').val() == 'Manager') { 
    $('.crossSaleCheckbox .choice:nth-child(3)').each(function() { 
      $(this).show(); 
    });
  }
  else if ($('.jobCategory input').val() == 'HR') { 
    $('.crossSaleCheckbox .choice:nth-child(4)').each(function() { 
      $(this).show(); 
    });
  }
  
});

The thing is - I've been backwards and forwards through the browser inspect element view - and I don't see any extra elements with the choice class - just the expected ones - nothing to explain why the counter is starting at 2 instead of 1.

Since this is pretty basic Javascript/JQuery functionality, I don't see how the Forms version change would be causing this behavior either.

0 0

Answer

SELECTED ANSWER

replied on April 26, 2022

Hi Matthew,

There is element change for checkbox field after Forms 10.2.

While please also check whether the CSS selector is intended, .choice seems won't work with nth-child according to https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector

0 0

replied on April 26, 2022

Okay, I see.

In 10.2 - we have a div element and all it contains is the span elements with the choice class. So my code worked, not because I was selected the child based on the class name but because there were no other childen in the div element.

But in 11 - we now have a fieldset element inside the div element - and that fieldset element contains a legend element before the span elements with the choice class. So that's why there is an extra child in 11 that wasn't there in 10.2 - that legend element.

That - and I totally misunderstood how nth-child works. I should have been using nth-of-type all along.

I switched my code to use .choice:nth-of-type(n) instead of .choice:nth-child(n) and that seems to have resolved the issue in both 10.2 and 11.

Thank you @████████!

2 0

Replies

replied on April 25, 2022

Hi Matthew-

I don't have an exact answer for you (yet I'm chiming in, anyway). I recall a big, complex form I had, the transition from 10.2 to 10.3 was kind of painful because the structure of some of the elements changed as did their class assignments. Most of my issues were table-related, so I don't know about your specific situation, but my guess would be "because changes".

1 0

You are not allowed to follow up in this post.

Question

Question

Unusual Javascript Behavior with :nth-child Selector in Version 11

Answer

Replies

Sign in to reply to this post.