JQuery, show an element based on 2 attribute conditions

Question

I was wondering if anyone knew about choosing a DIV based on its two attributes matching certain criteria using jQuery? Say, for example, I have a variable called "time", now if the data and data (below) are "seconds", how would you show the corresponding DIV based on the variable "time". Suppose all the divs below are hidden CSS for starters.

For example, if "time" = 15, then slide1 will be displayed, since it is between data (10) and data (20), and if "time" = 73, then slide4 will be displayed (between data at 70 and data-out 80) .

Here is the code (very simple),

<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

, filter() ^(docs):

: 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: ​​ - .

Answer 2

. , "start-with" ( "[id ^ = slide]" ), :

var time = 15;
jQuery('[data-in][data-out]').each(function(index, range){
    var $this = $(this),
        dataIn  = $this.attr('data-in'),
        dataOut = $this.attr('data-out');

    if(dataIn < time && time < dataOut) {
        $this.show();
    }
});