javascript - JQuery(也许是 javascript)澄清

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);

还有这个(分成两行):

$(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()

现在当你把它分成两行时，

$('<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 
})

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