更好地“找到父母"的方式如果语句 [英] Better way to "find parent" and if statements

问题描述

我不知道为什么这不起作用:

I can't figure out why this isn't working:

$(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');
}
});

以下是HTML结构的屏幕截图: http://cloud.lukeabell.com/JV9N (更新了正确的屏幕截图)

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

此外，必须有一种更好的方法来找到项目的父项(页面上有多个这些元素，因此我只需要使未选中的那些元素生效)

Also, there has to be a better way to find the parent of the item (there are multiple of these elements on the page, so I need it to only effect the one that is unchecked)

这里涉及其他一些可能很重要的代码:

Here's some other code that is involved that might be important:

$('.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 open to improvements for that section as well)

非常感谢您！

以下是所有情况的链接: http://linkedin.guidemytech.com/sign-up-for-linkedin-step-2-set-up-linkedin-student/

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

我已经改进了注释中的代码，但是第一部分仍然无法正常工作.

I've improved the code from the comments, but still having issues with that first section not working.

$(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');
          }
    }); 

推荐答案

哇，您可以使用 parents() 方法.

wow, you can use closest or parents() method.

closest( selector )获取与选择器匹配的第一个元素，从当前元素开始，一直扩展到DOM树.

closest( selector )Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

parents( [selector] )获取当前匹配元素集中每个元素的祖先，可以选择使用选择器进行过滤.

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

这篇关于更好地“找到父母"的方式如果语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！