Question

我试图动态更改div的background-color但不幸的是我似乎无法让它工作！请告诉我我的代码有什么问题。

代码：

<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
    $(document).ready(function(){
        var categorydivs = $(".category-container");
        $.each(categorydivs,function(index,div){
            div.css("background-color","yellow");
        });
    });
</script>
</head>
<body>
<div id="main-container">
    <div class="category-container">
        Category 1
    </div>
    <div class="category-container">
        Category 2
    </div>
</div>
</body>
</html>

运行上面的代码后会抛出错误：Uncaught TypeError: div.css is not a function。的为什么吗

Answer 1

div里面的each不是jQuery object它是HTML元素，所以你不能在它上面调用jQuery方法。

您可以使用$(this)内的each来获取当前的div个实例。

$(document).ready(function () {
    var categorydivs = $(".category-container");
    $.each(categorydivs, function (index, div) {
        $(this).css("background-color", "yellow");
    });
});

DEMO

您不需要循环将css添加到所有元素。使用以下代码：

$(document).ready(function() {
    $(".category-container").css('background-color', 'yellow');
});

Answer 2

尝试使用： - $(this).css("background-color","yellow");代替div.css("background-color","yellow");

Answer 3

该行： div.css（＆＃34;背景色＆＃34;＆＃34;黄色＆＃34）;

更改为： $（DIV）的CSS（＆＃34;背景色＆＃34;＆＃34;黄色＆＃34）;

问候。

未捕获的TypeError：div.css不是函数

3 个答案: