如果类不存在并且它是第一个元素，则jQuery过滤元素并添加类答案

【问题标题】：jQuery filter elements and add class if class not present and if it's the first element如果类不存在并且它是第一个元素，则jQuery过滤元素并添加类
【发布时间】：2014-04-14 16:56:59
【问题描述】：

我想过滤一组元素，仅当集合中的另一个元素不包含“活动”类时，才将“活动”类添加到第一个元素。

如果上述说法属实，我还想隐藏其他元素。

需要修改的现有代码

$mmenu.not(':eq(0)').hide();
$mmenu.eq(0).addClass('active');
$mnav_a.eq(0).addClass('active');

我目前的失败尝试

$mmenu.filter(function( index ) {

    console.log(index);

    if (!$(this).hasClass('active')) {
        $mmenu.eq(0).addClass('active');
        $mnav_a.eq(0).addClass('active');
    };

    $(this).not('.active').hide();
});

Codepen

Pen - （编辑：现在显示正确的工作示例）

【问题讨论】：

你能设置一个包含一些标记的小提琴，以便我们知道我们在做什么吗？
@JayBlanchard 希望这会有所帮助 - codepen.io/samholguin/pen/snqgA

标签： javascript jquery html css

【解决方案1】：

这应该做你想要的..

// check and store if .active element exists
var active = $mmenu.not(':first').is('.active');

// if it doesn't exists
if (!active){
    $mmenu.hide() // hide all
          .removeClass('active') // remove the active class from any that have it
          .first() // select the first only
          .addClass('active') // give it the active class
          .show(); // and show it 
}

【讨论】：

如此简单，如此有效...谢谢！我已经在下面发布了菜单系统的完整代码，我知道这已经超出了预期，但是任何关于如何重构的输入都将是惊人的......感觉很笨拙！
@sam，您可能希望将其发布到 codereview.stackexchange.com 并标记它以进行重构。正是出于这个原因，它是一个专用的 stackexchange 站点..
codereview.stackexchange.com/questions/47220/…

【解决方案2】：

非常感谢 Gaby aka G.Petrioli ，工作代码如下：

$(window).smartresize(function () {

            var $mmenu = $('.menu__main');

            if ($mmenu.length > 0) {

                var $mnav = $('.menu__nav'),
                    $mnav_a = $mnav.find('a'),
                    m = parseInt($mnav.outerHeight(true), 10),
                    $contain = $mmenu.closest('.menu-container'),
                    h = 0,
                    l = 0;

                // check and store if .active element exists
                var active = $mmenu.not(':first').is('.active');

                // if it doesn't exists
                if (!active) {
                    $mmenu.hide() // hide all
                        .removeClass('active') // remove the active class from any that have it
                        .first() // select the first only
                        .addClass('active') // give it the active class
                        .show(); // and show it 

                    $mnav_a.eq(0).addClass('active');

                $mmenu.each(function(z) {

                    var $this = $(this);

                    $this.css('height','auto');

                    $this.css({
                        zIndex: z+1,
                        position: 'absolute',
                        top: m + "px",
                        left: l,
                        height: (parseInt($this.outerHeight(false), 10) + m) + "px"
                    });

                    l = l - $this.outerWidth();

                });

                $contain.height($mmenu.eq(0).height());

            } else {

                $mmenu.each(function(z) {

                    var $this = $(this);

                    $this.css('height','auto');

                    $this.css({
                        zIndex: z+1,
                        position: 'absolute',
                        top: m + "px",
                        height: (parseInt($this.outerHeight(false), 10) + m) + "px"
                    });

                });

                var $new_contain = $('.menu__main.active').height();

                $contain.height($new_contain);

            }

                $mnav_a.on('click', function(e) {

                    e.preventDefault();
                    var $this = $(this);

                    if (!$this.hasClass('active')) {

                        $mmenu.stop(true, true);

                        $mnav_a.removeClass('active');
                        $this.addClass('active');

                        $mmenu.filter($('.active'))
                            .removeClass('active')
                            .fadeOut(250)
                            .animate({left:l+"px"}, 250);

                        var $target = $mmenu.filter($this.attr('href'));

                        $contain.animate({height:$target.height()}, 250);

                        $target.addClass('active')
                            .fadeIn(250)
                            .animate({left:0}, 250);
                    }

                    $this.blur();
                });
            }
        });

【讨论】：