JQuery、2つの属性条件に基づいて要素を表示

Question

JQueryを使用して特定の条件を満たす2つの属性に基づいてDIVを選択する方法を知っていた人はいませんか？たとえば、データ入力とデータ出力（以下）が「秒」の場合、「時間」という変数がありますが、「時間」変数に基づいて関連するDIVをどのように表示しますか。下のすべてのDIVがCSSによって隠されていると仮定してください。

たとえば、「時間」= 15の場合、データ入力（10）とデータ出力（20）の間にあるためにslide1が表示され、「時間」= 73の場合はslide4（データ入力70およびデータアウト80）。ここで

は

<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> 

事前のおかげで、コード（非常に基本的な）です。

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

これらの要素を反復処理する方法を見つける必要があります。あなたは、「開始-と」セレクタ（「[ID^=スライド]」）を使用することができ、クラスを追加したり、このように二重の属性セレクタを使用することができます。

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(); 
    } 
});