братья и сестры () не работает, как ожидалось

Question

У меня есть группа значков, где, когда вы наводите курсор на значок, другие img в наборе исчезают. Я мог сделать это, используя более длинные селекторы, но Я хотел попробовать использовать селектор siblings () , но я просто не могу заставить его работать. Что мне здесь не хватает? Спасибо

<div id="picks" class="section">
    <div class="pick left">
        <img src="images/p_mary.jpg" />
        <div class="icons">
            <a href="#" ><img src="images/i_imdb.png" /></a>
            <a href="#" ><img src="images/i_imdb.png" /></a>
            <a href="#" ><img src="images/i_imdb.png" /></a>
            <a href="#" ><img src="images/i_imdb.png" /></a>
        </div>
    </div>
</div>

, а затем JavaScript:

$("#picks").find("a > img").hover(function () {
    $(this).siblings().stop().fadeTo(0, .3);
    $(this).stop().fadeTo(0,1);
}, function () {
    $(this).siblings().stop().fadeTo(500, 1);
});

Answer 1

Что ж, проблема с функцией siblings () заключается в том, что она возвращает братьев и сестер на одном уровне.

, если вы, например, сделаете следующее:

$("#picks").find(".icons a").hover(function () {
    $(this).siblings().stop().fadeTo(0, .3);
    $(this).stop().fadeTo(0,1);
}, function () {
    $(this).siblings().stop().fadeTo(500, 1);
});

Это должно сделатьссылки исчезают, потому что теги "a" находятся на одном уровне и, следовательно, являются родственными элементами в том, как работает "siblings ()".Использование "a> img" выбирает все теги img ... но ни у одного из них нет родных братьев ...

Посмотрите на этот код:

<a href="#">
  <img src="image.gif" />
  <img src="image.gif" />
  <img src="image.gif" />
</a>

Здесь у тегов img есть родные братья... Надеюсь, это достаточно ясно для вас.

Answer 2

Как это:

$('.icons > a').hover(function() {
    $(this).siblings().stop().fadeTo(300, 0.2);
}, function() {
    $(this).siblings().stop().fadeTo(300, 1);
});

Скрипка: http://jsfiddle.net/5jvmK/3/

---

Увеличение производительности

Используя вышеприведенную технику, он прикрепит событие наведения ко всем соответствующим элементам. Если на странице много значков, производительность может быть низкой. Вместо этого вы можете использовать .delegate, чтобы повысить производительность:

$('.icons').delegate('a', 'hover', function(event) {
    if (event.type == 'mouseenter') {
       $(this).siblings().stop().fadeTo(300, 0.2);
    }
    else
    {
       $(this).siblings().stop().fadeTo(300, 1);
    }
});

Это прикрепит событие к JUST .icons и сработает в событии соответствующего селектора a.

Допустим, у вас было 20 <div class="icons"> каждая со своими, скажем, 4 иконками. С:

• .hover: он прикрепит 80 событий к DOM (20 * 4).
• .delegate: будет добавлено только 20. Это увеличение производительности на 400%.

Скрипка: http://jsfiddle.net/5jvmK/5/

Answer 3

Я думаю, что на самом деле селектор нацелен на img try:

$(this).parent().siblings().children().stop().fadeTo(0, .3);

Для всех возможно попробуйте:

var siblings = $(this).parent().siblings(); 
for(var s = 0; s < siblings.length; s++){ 
     $(siblings[s]).children().stop().fadeTo(0,.3);
}