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

Question

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

如果上述说法正确，我也想隐藏其他元素。

现有代码需要编辑

$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

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

Answer 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 
}

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