jQuery: .is: последний ребенок (или первый ребенок) с определенным классом

Question

Я работаю над каталогом для велосипедов, который включает в себя фильтрацию и лайтбокс для подробной информации.

Обзор велосипеда состоит из большой ul с литой в ней, где каждый li представляет собой один велосипед. Подробная информация (которая используется для фильтрации) устанавливается и считывается с помощью атрибутов данных. Если li имеет класс .show, он соответствует критериям фильтра и, таким образом, показан в обзоре.

При навигации по лайтбокс (prev/next стрелки) пользователь должен видеть только велосипеды, соответствующие критериям (есть .show), что я и работаю.

Последний шаг (который я задаю для этого вопроса): в лайтбокс я хочу, чтобы «предыдущая» стрелка исчезла, когда первый велосипед активен, а «следующая» стрелка должна исчезнуть, когда последний велосипед активный.

Я попытался это:

if (info.is(":last-child")) { 
    lightbox.find(".lightbox-nav-next").hide(); 
} else { 
    lightbox.find(".lightbox-nav-next").show(); 
}; 

Где info является li, который показан в осветителя на данный момент.

Мне интересно, почему info.is(":last-child") не работает ... Я думаю, что это потому, что он выбирает последнего ребенка, не учитывая, имеет ли он класс .show.

Каков наилучший способ решить эту проблему? Спасибо заранее!

EDIT: Страница, о которой я говорю, находится по адресу: http://dev.onefinitystudios.com/rvs/verkoop.html. Файл, в котором находится javascript, - catalogus.js.

Answer 1

Вы можете использовать селектор :last.

Что необходимо проверить, является ли info таким же, как последний элемент с классом show, его можно достичь с помощью $('.show:last').is(info).

if ($('.show:last').is(info)) { 
    lightbox.find(".lightbox-nav-next").hide(); 
} else { 
    lightbox.find(".lightbox-nav-next").show(); 
} 

Answer 2

Вы также можете использовать JQuery .last()

JQuery .last() выбирает последний ребенок в любом случае

Так что ваш код будет что-то вроде:

if (info.last()) { 
    lightbox.find(".lightbox-nav-next").hide(); 
} else { 
    lightbox.find(".lightbox-nav-next").show(); 
}; 

http://api.jquery.com/last/

Answer 3

Попробуйте вместо этого с :last (да, его не с CSS, но с добавлением jQuery)

т.е.

if (info.is(":last")) { 
    ... 

Docs

Answer 4

lightbox.find(".lightbox-nav-next").toggle(function() { 
    return ! info.is(".show:last"); 
}); 

и

lightbox.find(".lightbox-nav-prev").toggle(function() { 
    return ! info.is(".show:first"); 
});