Question

我想通过jQuery将'container'div包含的多个不同子项传递给css background-image。它的工作原理但标题也会出乎意料地受到影响。以下是代码：

<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有背景图像，Detroit和Evolution也有museum.jpg的背景图像。我无法弄清楚为什么......所以任何帮助都会非常感激！

永

Answer 1

之所以发生这种情况，是因为您撰写的:nth-child（请注意开头的空格）表达式正在有效地评估*:nth-child，而不是.content:nth-child，正如您所期望的那样。

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

1 个答案: