How to select every last child which got specific css property?

jquery, jquery-selectors

Solution

Try this:

$('ul').each(function() {
    $(this).children('li').each(function(index, elem) {
            var l = $(elem).parent().find('li').filter(function() {
                return $(this).css('display') === 'block';
            }).length;
            if (index == l-1)
                $(this).addClass('last-visible');
    });
});

Here is working jsFiddle.

Problem

I am trying to select every last element which got `display:block` properties in a hidden parent element. Here is an example fiddle to play with. html: ``` <ul style="display:none;"> <li>1</li> <li>2</li> <li>3</li><!-- my goal is find last visible child on every hidden ul --> <li style="display:none;">4</li> </ul> ``` jQuery: ``` $('ul').each(function() { visibleCountOnEachUl =+ 0; $(this).children('li').each(function(index) { if ( $(this).css('display') === 'block' ) { visibleCountOnEachUl += 1; $(this).addClass('theseAreVisible'); //this part works; //i can select elems elems which got display:block //but can't select the last elem on each ul //if ( index === (visibleCount-1) ) { //$(this).addClass('last-visible'); //} } }); }); $('ul').find('li:visible:last').addClass('last-visible'); //This won't effect on child elements while their parent is hidden. ``` I found this similar question but solution works on visible parent.

Original source

Related problems