Hi guys, I'm using MixItUp to filter a result set. While I can count the DOM items having a certain class (say .LongLife), some elements having the same class but an inline style added by MixItUp to hide the elements ( style="display:none ) are also counted. I'd like to only count those which match class ".LongLife" and NOT got style:"display:none" (those simply show up as style="" ) - is this possible with either plain JavaScript or AlpineJS? Here's a very rough draft (I am not good at JS, please be kind!) of the function so far, which is called onMixEnd (a callback in the MixItUp library):

function countEurobat10items() {

        var eurobat10counterX = Array.from(containermixitup.querySelectorAll('.LongLife'));
        console.log(eurobat10counterX.length); // example: 35 total in DOM, 15 have "display:none" -> I want this number to be 20
        eurobat10counter = eurobat10counterX.length;
        // set this counter value into a span ID in the filter box
        $('#eurobat10counter').html(eurobat10counter);
       
        // change the className of the filter row, i.e. if we filter on one kind, we fade the others
        if ( eurobat10counter < 1 )
            {
                document.getElementById("eurobat10Label").className = "configuratorOptionItemSmallDisabled";
                document.getElementById("eurobat10counter").className = "configuratorOptionCounterDisabled";
            }
            else {
                document.getElementById("eurobat10Label").className = "configuratorOptionItemSmall";
                document.getElementById("eurobat10counter").className = "configuratorOptionCounter";
            } ;
    }

did that work for you?

@salted I don't know why I missed your replies earlier but in any case many thanks for that! I'm going to use your suggestions soon to clean up that code. Cheers again!