1

次の 2 行の意味がわかりません。

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

ここのセレクターを理解できません。 clone() と html() が何をするかは知っています

4

7 に答える 7

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

これは、変数に設定されている要素 id 、内部、および要素内のidofを持つ要素を探しています。templategrididmodel

たとえばmodel、文字列が 'container' の場合:

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

$("#templatebody", template)

これは「コンテキスト」セレクターです。変数#templatebodyに含まれる要素内の要素を探しています。templateset を持つ特定のページには 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>
于 2012-05-03T08:40:08.680 に答える
2

最初のものは、変数の ID を持つ親要素内にあるtemplateID を持つ別の要素内の IDを持つ要素です。gridmodel

モデルをに設定test

model = "test"

結果は次のようになります。

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

これは、HTML に同じ ID を持つ要素が複数あることを意味します。これは、セレクターを混乱させることが多いため、お勧めできません。(これも無効な HTML であると確信しています)

templateBody2 つ目は、最初のセレクターで見つかったテンプレート要素内のID を持つ要素を見つけるだけです。

于 2012-05-03T08:39:57.430 に答える
2

model文字列 が含まれているとしましょう"model"。次のセレクター:

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

id = を持つ要素を検索し、それ自体がtemplateid = を持つ要素内に含まれる id = を持つ要素内に含まれます。セレクター:gridmodel

$("#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", template).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 を選択します。これが何であるかを調べるには、値を表示するアラート (モデル) を使用できます。

次に、前に定義したテンプレート変数に含まれる te​​mplatebody 要素を選択します。

于 2012-05-03T08:41:03.973 に答える
1

コードは、同じ要素を見つけるという意味で、書き込みと同等です

var template = $("#" + model).find("#grid).find("#template").clone(),
    templateHtml = template.find("#templatebody").html();
  • モデルの値に等しい everelement と id を見つけ、
  • その中で、id grid を持つ要素を見つけます
  • その中で、テンプレートの id を持つものを見つけます。
  • 見つかった要素の検索を複製する
  • ID templateBody を持つもののクローン内。

ただし、html が有効な場合は、ID が #template の 1 つしか存在しません。その場合、コードは次のように簡略化できます。

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 に答える