CODEWITHSUNDEEP
jquery
parti
parti

Reputation: 215

Get last span that is visible

I'm trying to get the last span that is visible & it's data-id.

Fiddle: http://jsfiddle.net/billparti/9abtuexn/23/

Note Would expect the result to be 2 (last visible span) but keep getting 3

var rowsetname = 'dataset1';
var spanrs = 'something_rowset_' + rowsetname;
var csetlastid = $('span[id^="' + spanrs + '"]:visible').last().attr('data-id');
$('#result').text(csetlastid);

Upvotes: 0

Views: 23

Answers (1)

charlietfl
charlietfl

Reputation: 171679

From :visible selector docs

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

If the only change you ever make is on the visibility property you can do:

var rowsetname = 'dataset1';
var spanrs = 'something_rowset_' + rowsetname;

// filter out visibility:hidden
var csetlastid = $('span[id^="' + spanrs + '"]').filter(function(){
   return $(this).css('visibility') !=='hidden';
}).last().attr('data-id');

$('#result').text(csetlastid);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="something_rowset_dataset1_2_field1" style="visibility:visible" data-id="1"></span>
<span id="something_rowset_dataset1_2_field2" style="visibility:visible" data-id="2"></span>
<span id="something_rowset_dataset1_2_field3" style="visibility:hidden" data-id="3"></span>
<div id="result">test
</div>

Upvotes: 1

Related Questions