Best way to "find a parent" and if statements

Question

I can not understand why this does not work:

$(document).ready(function() { if ($('.checkarea.unchecked').length) { $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('checked').addClass('unchecked'); } else { $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('unchecked').addClass('checked'); } }); 

Here is a screenshot of the HTML structure: http://cloud.lukeabell.com/JV9N (Updated with the correct screenshot)

Also, there should be a better way to find the parent element of the element (there are several of these elements on the page, so I need it to execute only the one that is not checked)

Another code can be used here:

 $('.toggle-open-area').click(function() { if($(this).parent().parent().parent().parent().parent().parent().parent().hasClass('open')) { $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('open').addClass('closed'); } else { $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('closed').addClass('open'); } }); $('.checkarea').click(function() { if($(this).hasClass('unchecked')) { $(this).removeClass('unchecked').addClass('checked'); $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('open').addClass('closed'); } else { $(this).removeClass('checked').addClass('unchecked'); $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('closed').addClass('open'); } }); 

(Very good for improving this section)

Thank you very much!

Here's a link to where it all happens: http://linkedin.guidemytech.com/sign-up-for-linkedin-step-2-set-up-linkedin-student/

---

Update:

I improved the code from the comments, but still have problems with the fact that the first section does not work.

 $(document).ready(function() { if ($('.checkarea.unchecked').length) { $(this).parents('.whole-step').removeClass('checked').addClass('unchecked'); } else { $(this).parents('.whole-step').removeClass('unchecked').addClass('checked'); } }); 

-

  $('.toggle-open-area').click(function() { if($(this).parents('.whole-step').hasClass('open')) { $(this).parents('.whole-step').removeClass('open').addClass('closed'); } else { $(this).parents('.whole-step').removeClass('closed').addClass('open'); } }); $('.toggle-open-area').click(function() { $(this).toggleClass('unchecked checked'); $(this).closest(selector).toggleClass('open closed'); }); $('.checkarea').click(function() { if($(this).hasClass('unchecked')) { $(this).removeClass('unchecked').addClass('checked'); $(this).parents('.whole-step').removeClass('open').addClass('closed'); } else { $(this).removeClass('checked').addClass('unchecked'); $(this).parents('.whole-step').removeClass('closed').addClass('open'); } }); 

Answer 1

wow, you can use closest or parents() .

closest( selector ) Get the first element that matches the selector, starting from the current element and evolving through the DOM tree.

parents( [selector] ) Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

Answer 2

I would suggest:

 $('.toggle-open-area').click(function() { $(this).toggleClass('unchecked checked'); $(this).closest(appropriateSelector).toggleClass('open closed'); }); 

By the way, I cannot provide the actual selector instead of appropriateSelector , because your published image ¹ does not (seem to) include this particular element.

Literature:

• closest() .
• toggleClass() .

---

1. Do you understand that you can include the actual premium in the question? This is much more convenient and much easier to work (create demos, correct typos, keep useful in the event of an external site crash, death or reorganization of its contents ...).