jquery - 如何选择具有特定 css 属性的最后一个孩子？

Question

我正在尝试选择display:block在隐藏的父元素中具有属性的每个最后一个元素。

这是一个可以玩的示例小提琴。

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.

我发现了这个类似的问题，但解决方案适用于可见的父级。

Answer 1

试试这个：

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

这是工作的jsFiddle。

Answer 2

当父级为 display:block 时，这将起作用：

$('ul li:visible:last').addClass('select');

当父元素为 display:none 时，您应该将元素定位为绝对、可见性：隐藏或将它们定位在视口之外。

if( $('ul').css('display','none') ){

        $('ul').css({
            'display':'block',
            'position': 'absolute',
            'visibility': 'hidden'});

        $('ul li:visible:last').addClass('select');
    }