jquery - 在 wrapInner 函数中使用 jQuery 对象后，如何更新它的 css？

Question

我有一个简化的 div 和一些简化的样式：

<div id="divOne" style="width:400px;height:300px;background:#f00">
  This is my content to be wrapped.
</div>

我想创建一个 jQuery 对象并在附加后对其进行样式设置。

$(document).ready(function(){
  var divTwo = $('<div \>').css('background','#0f0');
  $('#divOne').wrapInner(divTwo);
  divTwo.css('background','#00f');
});

内部 div 应该有蓝色背景，而不是绿色。奇怪的是，我可以打电话给alert(divTwo.css('background'));它，它会告诉我它是蓝色的。

Answer 1

有趣的。这看起来像是 jquery 的一个怪癖，您创建的对象的样式在 wrapInner 函数期间没有被克隆。尝试这个：

$(document).ready(function(){
   $('#divOne').wrapInner('<div/>').find('div').css('background','#00f')
});

或这个

$(document).ready(function(){
   $('#divOne').wrapInner('<div style="background:#00f"/>')
});

Answer 2

试试这个没有名称属性

$(document).ready(function(){
   $('#divOne').wrappInner('<div\>');
   $('#divOne').children('div').css('background','#0f0')//blue color
});

Answer 3

首先将 div 附加到 dom，然后应用样式。

$(document).ready(function(){
   $('#divOne').wrappInner('<div name="innerDiv" \>');
  $('[name=innerDiv]').css('background','#0f0')//blue color
});