1

这是小提琴：http: //jsfiddle.net/Xhqz9/

我试图找到里面的所有图像，<div id="primary" />除了位于 any 里面的图像<div class="nohover" />，它总是一个子元素，并对这些图像做悬停效果。

<div id="primary">
    <img src="http://placehold.it/75x75">
    <div class="nohover">
        <img src="http://placehold.it/75x75">
    </div>
    <img src="http://placehold.it/75x75">
    <div class="nohover">
        <img src="http://placehold.it/75x75">
    </div>
</div>​

jQuery：

var postImgsRed = $('#primary').find('img');
postImgsRed.each(function() {
    $(this).css('border', '1px solid red');
});

var postImgsHover = $("#primary > :not(.nohover)").find("img");
postImgsHover.each(function() {
    $(this).hover(function() {
        $(this).fadeOut(100);
        $(this).fadeIn(500);
    })
});​

我的悬停功能未正确执行。它不会像我想做的那样对第一张或第三张图像产生影响。我究竟做错了什么？

4

6 回答 6

2 
var postImgsRed = $('#primary').find('img');
postImgsRed.each(function() {
    $(this).css('border', '1px solid red');
});

var postImgsHover = $("#primary > img");
postImgsHover.each(function() {
    $(this).hover(function() {
        $(this).fadeOut(100);
        $(this).fadeIn(500);
    })
});​

小提琴：http: //jsfiddle.net/Xhqz9/1/

注意：这适用于您的示例。如果您可以拥有不是#primary与条件匹配的直接后代的图像，则需要对其进行更改$("#primary img").not(".nohover img")。

于 2012-12-07T21:54:53.097 回答
2

使用.not选择器并过滤掉 .nohover 下的选择器

$('#primary img').not('.nohover img')

http://jsfiddle.net/HDuRq/

摆弄你的悬停效果

于 2012-12-07T21:55:32.097 回答
0

您可以找到以下的直接img后代#primary：

$('#primary > img').each();
于 2012-12-07T21:51:02.480 回答
0

使用选择器：

$('#primary > img')
于 2012-12-07T21:51:26.940 回答
0

使用children()代替，find()因为它只会选择节点的直接后代而不是任何后代：http ://api.jquery.com/children/

$('#primary').children('img');
于 2012-12-07T21:53:09.423 回答
-1

使用 .not() 排除具有 .nohover 类的元素：

$('#primary div').not('div.nohover').find('img')...
于 2012-12-07T22:03:02.287 回答