siblings() 没有按预期工作

Question

我有一组图标，当您将鼠标悬停在一个图标上时，该组中的其他图像会淡出。我可以使用更长的选择器来做到这一点，但是我想尝试使用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

像这样：

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

小提琴： http://jsfiddle.net/5jvmK/3/< /a>

---

性能提高

使用上述技术，它将为所有匹配的元素附加一个悬停事件。如果页面上有很多图标，性能可能会很低。相反，您可以使用 .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 个

，每个都有自己的图标，比如说 4 个图标。使用：

• .hover：它将向 DOM 附加 80 个事件 (20*4)。
• .delegate：它只会附加 20 个。这性能提高了 400%。

Fiddle： http://jsfiddle.net/5jvmK/5/

Answer 2

好吧，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 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);
}