Question

我在变量

中有一个html div元素

var rows = "";
rows += "<div>1111 : Hi there</div>";

我试图通过跟随添加背景颜色，但一切都失败了。

1.  $(rows).css({'background-color':'#FF0000'});
2.  $(rows).css({'background-color':'#FF0000 !important'});
3.  $(rows).css({backgroundColor:'#FF0000'});
4.  $(rows).css({backgroundColor:'#FF0000 !important'});
5.  $(rows).css('background-color','#FF0000');
6.  $(rows).css('background-color','#FF0000 !important');

7.  $(rows).find('div').css({'background-color':'#FF0000'});
8.  $(rows).find('div').css({'background-color':'#FF0000 !important'});
9.  $(rows).find('div').css({backgroundColor:'#FF0000'});
10. $(rows).find('div').css({backgroundColor:'#FF0000 !important'});
11. $(rows).find('div').css('background-color','#FF0000');
12. $(rows).find('div').css('background-color','#FF0000 !important');

可能有选择器问题但是得到了

来自Object[div]

的

console.log($(rows));输出

所以我认为选择器工作正常。

添加css后，此div将附加到其他div

$("#parentDiv").append(rows);

从萤火虫检查后

我只有<div id='parentDiv'><div>1111 : Hi There</div></div> 没有css添加到这个div。

如果我使用内联css它工作正常，所以我认为没有css来覆盖颜色

rows += "<div style='background-color:#FF0000'>1111 : Hi there</div>";

jQuery在其他方面做得很好。

此代码有什么问题，请有人帮忙吗....

感谢。

Answer 1

元素需要存在于DOM中才能应用css

试试这个：

var rows = "";
rows += "<div>1111 : Hi there</div>";

// new element
var newEl = $("#parentDiv").append(rows);
newEl.find('div').css({'background-color':'#FF0000'});

Answer 2

试试这个

var rows = $('<div />',{text:"1111 : Hi there"});
rows.css({'background-color':'#FF0000'});

或

$("#parentDiv").append(rows).find('div').css({'background-color':'#FF0000'});

Answer 3

您需要将$（rows）.css的结果存储到变量中，并使用该变量附加到父Div。

var rows = "";
rows += "<div>1111 : Hi there</div>";
var result = $(rows).css("background-color", "red");
$("#parentDiv").append(result);

Answer 4

您有两种选择。第一：

var rows = "";
rows += "<div>1111 : Hi there</div>";
// rows only contains a string
rows = $(rows).css({'background-color':'#FF0000'});

现在行将包含新的背景颜色。 jQuery会将字符串转换为扩展的dom对象，然后在其上使用.css函数，但是你必须存储返回的值，不会触及原始字符串。

第二个选项：

var rows = $("<div>1111 : Hi there</div>");
// now rows contains a jQuery extended dom object
rows.css({'background-color':'#FF0000'});

现在这个对象上的所有jQuery函数都可以工作，对象被直接操作，不需要存储返回的值。

$（selector）.css（）不起作用

4 个答案: