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

我试图选择每个最后得到的元素，它们隐藏了父元素中的display:block属性。如何选择每个具有特定css属性的最后一个孩子？

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.

我发现这个类似question但解决方案适用于可见父。

来源

2013-04-05 Barlas Apaydin

你试图解决什么问题？隐藏父母的所有孩子也将被隐藏，所以我不确定这种方法是特别可靠/有用的。 – 2013-04-06 10:10:11

@DavidThomas我正试图计算每个'ul'中的所有孩子，它们都得到'display：block'属性而不是最后一个。 – 2013-04-06 10:12:14

我明白了，但是一旦你得到了最后一个元素，你想要做什么？为什么你需要找到它？ – 2013-04-06 10:14:52

试试这个：块：

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

当父为显示：没有，你应该做的元素

$('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.

来源

2013-04-05 13:25:53 adeneo

我想找到每一个'li'哪个得到'display：block'属性？这有道理吗？ – 2013-04-05 13:31:01

是的它是有道理的，但是当父母显示'none'时不起作用，因为那么所有的孩子'li'都会返回显示'none' - > [** FIDDLE **]（http ：//jsfiddle.net/3exZB/） – adeneo 2013-04-05 13:32:29

仔细检查'each'函数，它可以选择具有'display：block'属性的元素，只更改它们的html值：http://jsfiddle.net/3h9CB/ – 2013-04-05 13:55:59

-1

当父是显示这将工作定位绝对，可视性：隐藏或将它们放置在视口外。

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

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

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

来源

2013-04-05 17:59:50

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

回答

相关问题