1

我无法弄清楚这两行是什么意思：

var template = $("#" + model + " #grid #template").clone();
var templateHtml = $("#templatebody", template).html();

我无法理解这里的选择器。我知道 clone() 和 html() 做什么

4

7 回答 7

3 
$("#" + model + " #grid #template")

这是在一个元素 id内部寻找一个带有idof的元素，在这个内部和元素里面设置了 which 在变量中。templategrididmodel

例如，如果model是字符串：'container'：

<div id="container">
    <div id="grid">
        <div id="template"></div> <!-- this div would be selected -->
    </div>
</div>

$("#templatebody", template)

这是一个“上下文”选择器；它正在寻找包含在变量中的#templatebody元素内的元素。template请注意，在这种情况下，上下文选择器无关紧要，因为在给定页面中应该只有一个元素具有 set id。

例子

var template = $("#container"); // note - can also be a string: "#container"
$("#templatebody", template)

<div id="container">
    <div id="templatebody"></div> <!-- this div would be selected -->
</div>
于 2012-05-03T08:40:08.680 回答
2

第一个是具有 ID 的元素template，在另一个具有 ID的元素内，该元素位于具有变量gridID 的父元素内。model

将模型设置为test

model = "test"

结果如下：

<div id="test">
    <div id="grid">
         <div id="template">   <--- this element is found
         </div>
    </div>
</div>

这意味着在您的 HTML 中存在多个具有相同 ID 的元素，这不是一个好主意，因为它经常会混淆选择器。（我相当肯定它也是无效的 HTML）

第二种是简单地templateBody在第一个选择器中找到的模板元素中找到具有 ID 的元素。

于 2012-05-03T08:39:57.430 回答
2

假设model包含字符串"model"。以下选择器：

$("#" + model + " #grid #template")

查找具有 id =template并包含在具有 id = 的元素中的元素，该元素grid本身包含在具有 id = 的元素中model。选择器：

$("#templatebody", template)

templatebody在先前匹配的元素（的克隆）中查找 id =的元素。

话虽如此，第一个选择器可以写成$("#template")因为 id 应该是唯一的。如果不是这种情况，那么您将得到意想不到的结果。此外，以引入重复 ID 的方式克隆元素是一个坏主意。

于 2012-05-03T08:40:37.100 回答
1

首先，选择器中的 3 个 ID？感觉有点矫枉过正。但是您所做的是克隆#template并从克隆中找到一个具有 id 的孩子#templatebody并取出其 HTML 内容。你不需要克隆它来获取 HTML 文本。

// Find the #template that is a child of #grid and #grid is a child of #<insertModel> and clone it
var template = $("#" + model + " #grid #template").clone();
// Find #templatebody child of template ( http://api.jquery.com/jQuery/#jQuery2 ) and get the HTML text thats in #templatebody

var templateHtml = $("#templatebody", 模板).html();

如果您的标记看起来像：

<div id="model">
    <div id="grid">
        <div id="template"><b>Hi</b> there!</div>
    </div>
</div>

您的 templateHTML 变量将包含'<b>Hi</b> there!'

于 2012-05-03T08:39:26.447 回答
1 
var template = $("#" + model + " #grid #template")

将选择带有网格和模板的 id 以及模型变量的 id。要找出这是什么，您可以 alert(model) 它将显示该值。

然后选择包含在您之前定义的模板变量中的 templatebody 元素。

于 2012-05-03T08:41:03.973 回答
1

在寻找相同元素的意义上，代码等同于编写

var template = $("#" + model).find("#grid).find("#template").clone(),
    templateHtml = template.find("#templatebody").html();
  • 找到everelement有什么和id等于model的值，
  • 在其中找到一个id为grid的元素
  • 在其中找到一个模板 id 的。
  • 克隆找到的元素搜索
  • 在具有 id templateBody 的克隆中。

但是，如果 html 是有效的，那么只有一个 id 为 #template 在这种情况下，代码可以简化为

var template = $("#template").clone();
    template.find("#templateBody");

除了不测试模板和网格以及网格和模型之间的父/子关系之外。如果需要，不能使用简化版

于 2012-05-03T08:51:25.507 回答
0

第一行在 #" + 模型中的 #grid 中查找 ID 为 #template 的元素。

ID 在页面上应该是唯一的，理想情况下，第一行应该替换为：

var template = $("#template").clone();
template.attr("id", "newid"); // assign a new unique id
于 2012-05-03T08:51:08.873 回答