Question

我尝试将样式添加到动态创建的元素中，并找到了this good working solution here on the site。

-----编辑：添加更多代码-----

function createAndShowPatch(){
  selected = $('.active');
  var radiosForPatch = [];
  for (radio in selected){
  //must be a beeter way to iterate over "selected"
  //without checking if Object and has property "id"... any suggestions? 
    if (typeof selected[radio] === "object" && "id" in selected[radio]){
        radiosForPatch.push(($.grep(radios, function(e){ return e.id == selected[radio].id; }))[0]);
      }
  }


  var patch = new Patch(radiosForPatch);
  var guiPatch = createNewGUIPatch(patch);
  var style = {
    position: "absolute",
    top: mouseY +"px",
    left: mouseX +"px"
  }

  $(guiPatch).appendTo($(".container")).css(style).draggable();
}

function createNewGUIPatch(patch){
  var patchToReturn;
  var patchContent = "";
  for (radio in patch.radios){
    patchContent += "<p> " + patch.radios[radio].name + "</p>";
  }

  patchToReturn = "<div class='patch'><h1>Patch</h1>" + patchContent + "</div>";
  return patchToReturn;
}

-------编辑结束------ 但这让我想知道为什么我尝试的东西没有工作和思考也许我错过了一些与JQuery相关的基本重要事情（甚至是javascript： - /）

所以，问题是，这有什么区别：

$(guiPatch).appendTo($(".container")).css(style);

和这（分成2行）：

$(guiPatch).appendTo($(".container"));
$(guiPatch).css(style);

为什么第一个工作，而第二个工作没有。

谢谢:)。

Answer 1

可以说，guiPatch包含一些HTML，例如<div>ABC</div> 现在你的第一个代码看起来像，

$('<div>ABC</div>').appendTo($(".container")).css("color","yellow")

jQuery函数可以链接在一起，因为在每个阶段它返回对象，因此下一个函数可以处理返回的对象。因此，$('<div>ABC</div>')正在将<div>ABC</div>个对象返回到appendTo个函数。同样，$('<div>ABC</div>').appendTo($(".container"))也在对该对象进行工作，并将同一对象返回/传递给下一个函数，即.css()

现在当你用2行打破它时，

$('<div>ABC</div>').appendTo($(".container"));
$('<div>ABC</div>').css("color","yellow");

第一行将<div>ABC</div>对象追加到.container。精细。但是第二行也创建了另一个<div>ABC</div>对象并将其传递给.css（）函数，该函数正在执行其工作，即应用样式并返回对象<div style="color: yellow;">ABC</div>。但是我们无法看到更改，因为我们没有将此新<div>ABC</div>附加/添加到DOM中的任何位置。一旦.css（）函数完成其工作，该对象就会丢失。

希望现在很清楚。

在Chrome开发者工具中试用。复制并粘贴并按下输入我已分解的每一段/每一段代码，您将能够看到它的实际效果。

谢谢。

编辑/补充： *****代码内的评论附加说明************

无论jQuery（$）返回总是和对象。因此，检查它是否是一个对象是多余的[imo]。您可以在Chrome开发者控制台中输入以下代码进行检查，

typeof($(''))   // returns object, though empty

并且在任何网页的控制台中输入以下内容，

typeof($('div'))   // also an object, but an array of all the divs in that webpage

你也可以直接使用.each，而不是另一个for循环，如果你愿意，

$('.active').each(function(index){
  $(this) //$(this) will give you an object to work on in each iteration 
})

如果您发现任何例外，请发表评论，我会更新我的答案。

JQuery（也许是javascript）澄清

1 个答案: