如何选择每个具有特定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但解决方案适用于可见父。
试试这个:块:
$('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');
});
});
我想找到每一个'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
当父是显示这将工作定位绝对,可视性:隐藏或将它们放置在视口外。
if($('ul').css('display','none')){
$('ul').css({
'display':'block',
'position': 'absolute',
'visibility': 'hidden'});
$('ul li:visible:last').addClass('select');
}
你试图解决什么问题?隐藏父母的所有孩子也将被隐藏,所以我不确定这种方法是特别可靠/有用的。 – 2013-04-06 10:10:11
@DavidThomas我正试图计算每个'ul'中的所有孩子,它们都得到'display:block'属性而不是最后一个。 – 2013-04-06 10:12:14
我明白了,但是一旦你得到了最后一个元素,你想要做什么?为什么你需要找到它? – 2013-04-06 10:14:52