JQuery, show an element based on 2 attribute conditions

Question

I was wondering if anyone knew of a way of selecting a DIV based on 2 of its attributes meeting a certain criteria using JQuery? Say for example I have a variable called 'time', now if data-in and data-out (below) are 'seconds', how would you show the relevant DIV based on the 'time' variable. Assume all the DIVs below are hidden by CSS to start with.

For example if 'time'=15 it would show slide1 because it's between data-in (10) and data-out (20), and if 'time'=73 it would show slide4 (between data-in 70 and data-out 80).

Here is the code (very basic),

<div id="slide1" data-in="10" data-out="20" name="slide1"></div> 
<div id="slide2" data-in="30" data-out="40" name="slide2"></div> 
<div id="slide3" data-in="50" data-out="60" name="slide3"></div> 
<div id="slide4" data-in="70" data-out="80" name="slide4"></div> 
<div id="slide5" data-in="90" data-out="100" name="slide5"></div>

Thanks in advance.

Answer 1

You could do it like this using filter()^(docs) :

Example: http://jsfiddle.net/3vDcb/4/

var time = 35;

$('div[name^=slide]').filter(function() {
    var data_in = $(this).attr('data-in');
    var data_out = $(this).attr('data-out');

    return time >= data_in && time <= data_out;
}).show();

---

EDIT: Fixed an error due to gaps in ranges.