使用 JQuery 在每个函数中选择所有不是“this”的元素答案

【问题标题】：Select all elements that are NOT "this" in an each function with JQuery使用 JQuery 在每个函数中选择所有不是“this”的元素
【发布时间】：2015-12-17 19:38:15
【问题描述】：

我在页面上有一堆按钮，当单击一个按钮时，其中一个是删除类（“程序选择器”）和添加类（“打开”）的父元素。但是，我也想对其他没有被点击的按钮的所有其他父母做相反的事情。

所以当一个按钮被点击时，它的父级获得“opened”类并失去“program-collector”类，而按钮的其余父级失去“opened”类并获得“program collector”类。

以下是我尝试使用但无济于事的代码。我一定是错误地使用了 .not() 选择器，但我不知道在这种情况下如何使用它。

$(".faculty-panel a").each(function(l,tab) {
            $(tab).click(function(){    
              if($(tab).hasClass("collapsed")){
                $(this).closest(".program-collector").addClass("opened");
                $(this).closest(".program-collector").removeClass("program-collector");
                $(tab).not($(this)).closest(".opened").addClass("program-collector");
                $(tab).not($(this)).closest(".opened").removeClass("opened");

}

还有 HTML...

<div class="program-collector" id="<?=($content['field_curriculum_program_title'][0]['#title'])?>">
<div id="panel-wrap">

    <div class="panel">

        <h3 class="lg-screen-prg-title"><?=$content['field_curriculum_program_title'][0]['#title']?></h3>
        <div class="panel-heading faculty-panel" role="tab" id="heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse" aria-expanded="true" aria-controls="collapse" class="collapsed">
            <?= render($content['field_curriculum_program_title'][0]['#title']); ?>
            </a>
        </h4>
        </div>
        <div id="collapse" class="panel-collapse collapse faculty-prg" role="tabpanel" aria-labelledby="heading">
        <?php print render($content['field_faculty_member']); ?>
        </div>
    </div>
</div>
</div>

【问题讨论】：

如果没有看到您的 HTML，很难以有用的方式回答这类问题。
哟。显示您的 HTML，以便我们可以建议替代您的 parent() 家谱。
更好，建立一个小提琴：jsfiddle.net
@isherwood - 不喜欢 stack sn-ps？
而不是去 parent().parent().parent() 做 $(this).closest(".parentContainer") 或类似的东西来简化你的javascript。

标签： jquery arrays loops button

【解决方案1】：

在您的情况下，您不需要使用 :not 选择器来隔离某个元素。您可以简单地使用以下表达式来实现您想要做的事情。

选项 1： 添加-删除类。

   $(".faculty-panel a").on("click",function() {  

    $(".faculty-panel a").closest('.opened').addClass('program-collector').removeClass('opened');  // find the parent of all the matching elements which has class 'opened' and add class 'program-collector' while removing class 'opened'

  $(this).closest('.program-collector').addClass('opened').removeClass('program-collector'); // find the parent of the button clicked and add class 'opened' while removing class 'program-collector'
});

工作示例：https://jsfiddle.net/DinoMyte/3hvvdht9/1/

选项2：使用toggleClass()

$(".faculty-panel a").on("click",function() {  

    $(".faculty-panel a").closest('.opened').toggleClass('program-collector opened');  

  $(this).closest('.program-collector').toggleClass('opened program-collector');
});

工作示例：https://jsfiddle.net/DinoMyte/3hvvdht9/2/

【讨论】：

当然。很高兴帮助:)