Question

我正在尝试查找<div id="primary" />内的所有图像，但位于任何<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);
    })
});

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

Answer 1

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")，则需要进行更改。

Answer 2

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

下的选项卡

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

http://jsfiddle.net/HDuRq/

Fiddle with your hover effects

Answer 3

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

$('#primary > img').each();

Answer 4

使用选择器：

$('#primary > img')

Answer 5

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

$('#primary').children('img');

Answer 6

使用.not（）排除.nohover类的元素：

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

在div中查找除了某个子div之外的图像

6 个答案: