jQuery класс потомка недоступен, как планировалось

Question

Я создаю фотогалерею и вам необходимо применить CSS к первой фотографии в пределах моего div #wrapper. Вот соответствующий код:

$('.inside:first-of-type>div:nth-of-type(1)').css('display', 'none'); 
$('.inside:first-of-type>div:nth-of-type(2)').css('display', 'block'); 

Все элементы в связи с #wrapper DIV назначены класс .inside (этот класс удаляется, как только они скользят за пределами #wrapper). Каждая фотография имеет два div-слоя. В этом случае я хочу скрыть 1-й и удалить второй слой. Я думал, что вышеприведенный код будет работать, и это произойдет, но только если будет показана первая фотография серии, иначе она ничего не сделает.

Является ли мой CSS неправильным здесь?

Answer 1

Во-первых, такого селектора нет: first-of-type в jQuery, и так в большинстве броузеров.

Это то, что вам нужно:

var items = $('#wrapper .inside > div'); 
items.eq(0).css('display', 'none'); 
items.eq(1).css('display', 'block'); 

Примечания:

• Лучше кэшировать результат выбора, и избежать второго запроса DOM.
• Вы можете использовать функцию hide на первом DIV: items.eq(0).hide();
• I want to hide the 1st and remove the 2nd layer.
.css('display', 'block'); ничего не снимает! Вероятно, вы хотите использовать функцию remove: items.eq(1).remove();