jquery - 在将标签附加到 DOM 之前设置标签 css 属性

Question

append()我使用 jquery方法放入 DOM div 标签

我想要在放置之前，设置 div 标签一些 css 属性，例如visibility: "hidden"

这不起作用：

$(document).ready( function () {

     $(".child").css({
         visibility: "hidden"   
      });

      $("body").append('<div class="child"></div>');


});

http://jsfiddle.net/SBAFk/

如何解决这个问题呢 ？

Answer 1

您的代码无法工作，因为它没有创建新的 CSS 规则，而只是搜索匹配的元素 - 并且还找不到新元素。最简单的方法是创建元素，设置其 CSS 属性，然后将其添加到 DOM：

var div = $('<div class="child"></div>').css('visibility', 'hidden');
$('body').append(div);

另一种选择是创建一个与选择器匹配的新 CSS 规则。

Answer 2

您的代码中的问题是，jquerychild在将其添加到 DOM 之前正在搜索类......因为它没有插入到 DOMtree 中，所以它将无法找到.......css()在附加 div 之后放置您的代码

$(document).ready( function () { 
  $("body").append('<div class="child"></div>');

  $(".child").css({
     visibility: "hidden"   
  });
});

在这里摆弄