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

Question

I'd like to filter through a set of elements, adding the class 'active' to the first element only if another element in the set does not contain the class 'active'.

I'd also like to hide the other elements if the above statement is true.

Existing code that needs editing

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

My current failed attempt

$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 - (edit: now shows correct working example)

Answer 1

This should do what you want..

// 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

Many thanks to Gaby aka G.Petrioli , the working code is as follows:

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