次の 2 行の意味がわかりません。
var template = $("#" + model + " #grid #template").clone();
var templateHtml = $("#templatebody", template).html();
ここのセレクターを理解できません。 clone() と html() が何をするかは知っています
次の 2 行の意味がわかりません。
var template = $("#" + model + " #grid #template").clone();
var templateHtml = $("#templatebody", template).html();
ここのセレクターを理解できません。 clone() と html() が何をするかは知っています
$("#" + model + " #grid #template")
これは、変数に設定されている要素 id 、内部、および要素内のid
ofを持つ要素を探しています。template
grid
id
model
たとえばmodel
、文字列が 'container' の場合:
<div id="container">
<div id="grid">
<div id="template"></div> <!-- this div would be selected -->
</div>
</div>
$("#templatebody", template)
これは「コンテキスト」セレクターです。変数#templatebody
に含まれる要素内の要素を探しています。template
set を持つ特定のページには 1 つの要素のみが存在する必要があるため、この場合、コンテキスト セレクターは無関係であることに注意してください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>
最初のものは、変数の ID を持つ親要素内にあるtemplate
ID を持つ別の要素内の IDを持つ要素です。grid
model
モデルをに設定test
model = "test"
結果は次のようになります。
<div id="test">
<div id="grid">
<div id="template"> <--- this element is found
</div>
</div>
</div>
これは、HTML に同じ ID を持つ要素が複数あることを意味します。これは、セレクターを混乱させることが多いため、お勧めできません。(これも無効な HTML であると確信しています)
templateBody
2 つ目は、最初のセレクターで見つかったテンプレート要素内のID を持つ要素を見つけるだけです。
model
文字列 が含まれているとしましょう"model"
。次のセレクター:
$("#" + model + " #grid #template")
id = を持つ要素を検索し、それ自体がtemplate
id = を持つ要素内に含まれる id = を持つ要素内に含まれます。セレクター:grid
model
$("#templatebody", template)
templatebody
以前に一致した要素 (のクローン) 内で id = を持つ要素を検索します。
そうは言っても、$("#template")
id は一意でなければならないので、最初のセレクターは次のように記述できます。そうでない場合、予期しない結果が得られます。また、重複する ID を導入するような方法で要素を複製することは、悪い考えです。
まず、セレクターの 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", template).html();
次のようなマークアップがある場合:
<div id="model">
<div id="grid">
<div id="template"><b>Hi</b> there!</div>
</div>
</div>
templateHTML 変数には次が含まれます'<b>Hi</b> there!'
var template = $("#" + model + " #grid #template")
グリッドとテンプレートの ID とモデル変数の ID を選択します。これが何であるかを調べるには、値を表示するアラート (モデル) を使用できます。
次に、前に定義したテンプレート変数に含まれる templatebody 要素を選択します。
コードは、同じ要素を見つけるという意味で、書き込みと同等です
var template = $("#" + model).find("#grid).find("#template").clone(),
templateHtml = template.find("#templatebody").html();
ただし、html が有効な場合は、ID が #template の 1 つしか存在しません。その場合、コードは次のように簡略化できます。
var template = $("#template").clone();
template.find("#templateBody");
ただし、テンプレートとグリッド、グリッドとモデルの間の親子関係はテストされません。それが必要な場合、簡易版は使用できません
最初の行は、#" + モデル内にある #grid 内で ID #template を持つ要素を見つけます。
ID はページ上で一意であることが想定されており、理想的には最初の行を次のように置き換える必要があります。
var template = $("#template").clone();
template.attr("id", "newid"); // assign a new unique id