Question

我是网络编程和jQuery的新手。

目的：
我尝试使用以下代码将div背景设置为红色，但它失败了。

$(stepBox).find(".image").css('background-color', 'red');

我可以知道这是什么问题吗？

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>  

    <script>
        $(document).ready(function() {

            var stepBox = "<div class='step' id='1'>"
                        + "    <div class='summary'>summary</div>"
                        + "    <div class='image'>image</div>"
                        + "</div>";

            $(".steps").append(stepBox);

            $(stepBox).find(".image").css('background-color', 'red');
        });
    </script>
</head>

<body>
    <div class="steps">

    </div>
</body>
</html>

解决：

将其更改为（添加$ sign）

var stepBox = $("<div class='step' id='1'>"
             + "    <div class='summary'>summary</div>"
             + "    <div class='image'>image</div>"
             + "</div>");

谢谢你们。

@Abovestand  upvote (I get the point and convert string to object)       
@JanR  mark as answer  (first response)      
@Pratik Thakkar  upvote (alternative method)

进一步的信息，因为“步骤”可能有很多“步骤”，所以我更喜欢操作属于“stepBox”中“step”的“image”。

$('.step .image').css('background-color', 'red');也应该可行。（@Pratik Thakkar）

Answer 1

变量“stepBox”是一个字符串。 jQuery需要对元素的引用。这将有效：

 $(".steps").find(".image").css('background-color', 'red');

编辑：

回应你的评论，是的。要从字符串创建jQuery元素，您可以执行以下操作：

var stepBoxEle = $.parseHTML(stepbox)[0];

不幸的是，将stepBoxEle附加到页面只会复制它，因此之后编辑它不会改变页面上的内容。您可以在追加之前编辑stepBoxEle，例如：

$(stepBoxEle).find(".image").css('background-color', 'red');
$(".steps").append(stepBoxEle);

Answer 2

以下代码应该可以正常运行。您需要做的就是使用类.step

选择div中的.image类

$('.step .image').css('background-color', 'red');

如果你想要所有带有＆＃34; .image＆＃34;类的元素，你可以交替使用下面的代码。在div中使用class .steps

$('.steps .image').css('background-color', 'red');

请参阅下面的小提琴链接 http://jsfiddle.net/yxzrut2q/

Answer 3

问题在于这一行：

$(stepBox).find(".image").css('background-color', 'red');

根据.find()文档：获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。这基本上意味着搜索与搜索匹配的任何子对象的当前对象。但是stepBox不是jquery对象或元素。

您想将其更改为：

$(".steps").find(".image").css('background-color', 'red');

小提琴：

http://jsfiddle.net/t7b84bsg/

为什么我不能使用jQuery设置div背景？

3 个答案:

为什么我不能使用jQuery设置di​​v背景？

3 个答案:

为什么我不能使用jQuery设置div背景？