背景图像意外地设置为目标div的后代

Question

我想通过jQuery将css background-image传递给'container'div中包含的多个不同的子元素。它的工作，但标题也意外地受到影响。下面是代码:

<div class='container'>
    <div class='content'  id='museum'>
        <a>Detroit Museum High + Low</a>
    </div>
    <div class='content' id='metalic'>
        <a>Metalic Evolution</a>
    </div>
    <div class='content'></div>
    <div class='content'></div>
    <!--  smaller sections for loading content, projects, etc. -->
</div>

和js:

    for (var i = $('.container .content').length - 1; i >= 0; i--) {
        var $currentContent = $('.container :nth-child(' + i + ')');
        var $attr = $currentContent.attr('id');
        //filter out the content that doesn't have an id
        $currentContent.css({
            'background-image': typeof $attr === 'undefined' ? 'none' : 'url(_images/' + $currentContent.attr('id') + '.jpg)',
        });
    }

所以问题是，不仅"内容"div有背景图像，底特律和进化也有博物馆的背景图像。jpg。我不明白为什么……所以任何帮助将非常感激!

勇

Answer 1

发生这种情况是因为您编写的:nth-child(注意开头的空格)表达式有效地求值为*:nth-child，而不是您期望的.content:nth-child。