Получите nth-child и действуйте по нему: jQuery - PullRequest
Новая
       16

Получите nth-child и действуйте по нему: jQuery

0 голосов
/ 22 октября 2011

Приведенный ниже код действует только на последний дочерний элемент и вызывает функцию для всех остальных дочерних элементов. 

$('.streetdog').hide();
$('.cat').mouseenter(function(){
    var $catVal = $(".cat").index(this);
    $('.streetdog:nth-child('+$catVal+')').show();
});

Вы можете увидеть демо на jsfiddle . В основном я пытаюсь вызвать дочерний элемент определенного цикла и наведения .cat

Ответы [ 2 ]

2 голосов
/ 22 октября 2011

Используйте :eq вместо :nth-child. Поскольку .eq() более эффективен, чем :eq, используйте .eq() вместо: 

$('.streetdog').hide();
$('.cat').mouseenter(function(){
    var $catVal = $(".cat").index(this);
    $('.streetdog').eq($catVal).show();
});

Скрипка: http://jsfiddle.net/rkM8N/1/

$('.streetdog').eq() создает набор, состоящий из всех элементов, имя класса которых равно streetdog. Затем .eq(n) возвращает n -й элемент в этом наборе.

$('.streetdog:nth-child(' + $catVal + ')') выберите элемент .streetdog, который является $catVal -ым дочерним элементом его родителя. Следовательно, элементы отображаются только тогда, когда $catVal равно двум.

1 голос
/ 22 октября 2011

Совершенно хороший ответ уже был дан, но в качестве альтернативы, если ваша HTML-структура не изменится, вы можете использовать parent, чтобы получить родительский div, и next, чтобы получить.streetdog элемент: 

$(".streetdog").hide();
$(".cat").mouseenter(function() {
    $(this).parent().next().show(); 
});

Вот рабочий пример .

Причина, по которой eq работает, но nth-child не работает, объясняется jQuery docs :

Псевдокласс: nth-child (n) легко перепутать с: eq (n), даже если эти два могут привести к совершенно разным сопоставляемым элементам.С помощью: nth-child (n) подсчитываются все дочерние элементы независимо от того, кем они являются, и указанный элемент выбирается, только если он соответствует селектору, прикрепленному к псевдоклассу.С помощью: eq (n) учитывается только селектор, присоединенный к псевдоклассу, не ограничиваясь потомками любого другого элемента, и выбирается (n + 1) -й элемент (n на основе 0).

...