jquery - How to select every last child which got specific css property? -
i trying select every last element got display:block
properties in hidden parent element.
here example fiddle play with.
html:
<ul style="display:none;"> <li>1</li> <li>2</li> <li>3</li><!-- goal 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 got display:block //but can't select 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 parent hidden.
i found similar question solution works on visible parent.
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'); }); });
Comments
Post a Comment