JQuery, показать элемент на основе 2 условий атрибута

Question

Мне было интересно, знает ли кто-нибудь о способе выбора DIV на основе 2 его атрибутов, соответствующих определенным критериям, с использованием JQuery? Скажем, например, у меня есть переменная под названием «время», теперь, если входные и выходные данные (ниже) равны «секундам», как бы вы показывали соответствующий DIV на основе переменной «время». Предположим, что все перечисленные ниже DIV скрыты с помощью CSS.

Например, если 'time' = 15, будет отображаться slide1, потому что он находится между входными данными (10) и data-out (20), а если 'time' = 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() ^{(документы)} :

Пример: 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();

---

РЕДАКТИРОВАТЬ: Исправлена ​​ошибка из-за пробелов в диапазонах.

Answer 2

Вам нужно найти способ перебора этих элементов.Вы можете добавить класс, вы можете использовать селектор «начинается с» ('[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();
    }
});