How to select last flexbox element?

Question

I have a grid-system which can be 3 to 1 column wide. The boxes are always 320x320 sized. Each box has a class-name which determine its position in the grid, eg. <div class="sp3-om sp2-4r sp1-6"></div>. One column is pure flexbox, eg. "sp1-6" has order: 6. To append an back-button i need to select the last box, which is :visible and has the highest order. I have tried multiple things like

$('.box').filter(function(){ return $(this).css('order') == 6 })

How can i select the last visible flexbox element, because .last() selects the last element in DOM, not the last one visible on the screen.

here is a fiddle http://jsfiddle.net/200c5px3/1/ - the goal is a grid where you can set the postion of each box in the grid via classname depending on the column-count. — mycaravam, Oct 30 '15 at 06:58

score 1 · Answer 1 · answered Oct 30 '15 at 07:26

1

Try this

$('.grid').find('.box:visible').eq($('.box:visible').length-1)

Hope this helps.

answered Oct 30 '15 at 07:26

satishkumar

146
6

this seems interessting, but in this fiddle and on the live-system it selects the second last element http://jsfiddle.net/200c5px3/3/ – mycaravam Oct 30 '15 at 07:40
1

using this with the live system it selects the last element in DOM, not the last flexbox-element... – mycaravam Oct 30 '15 at 10:27

How to select last flexbox element?

1 Answers1