0

DOM に適用する前に、DOM に適用する html を含む変数を操作できる必要があります。

ハンドルバー テンプレートを取得し、JSON オブジェクトをコンパイルして適用しました。DOM に適用されるマークアップを含む var になります。

残念ながら、jQuery はこの出力を操作できません。この変数を html として扱うように jQuery を取得して、DOM に追加する前に操作できるようにする方法はありますか?

以下の例

var htm = '<section><div></div></section>';
$('div',$(htm)).addClass('smurf');
alert(htm);
4

3 に答える 3

3

試す：

var htm = '<section><div></div></section>';
var $htm = $(htm);
$htm.find("div").addClass('smurf');
htm = $("<div>").append($htm).html();
alert(htm);

デモ: http://jsfiddle.net/Mf5JC/

あなたのコードの問題は、あなたが期待するように、jQuery が文字列をその場で変更しないことです。jQuery 要素を作成し、それを操作 (クラスを子 div に追加) し、コンテンツを取得することで、これを回避する必要があります。

あなたのコードがしたことは次のとおりです。

  1. HTML 文字列を取得し、新しい jQuery オブジェクトに配置します
  2. <div>その HTML で子孫を見つけます
  3. 一致した要素にクラス「smurf」を追加します
  4. htm元のHTML 文字列を警告する

新しい jQuery オブジェクトでどのように動作していたかに注意してください。jQuery オブジェクトを作成すると、元の文字列への参照が保持されないため、変更できません。私が提供したコードのように、ロジックを分離すると、目的を達成できます。

于 2013-04-08T14:23:08.607 に答える
0

文字列を取得し、そこから jQuery オブジェクトを構築し (文字列から DOM を作成します)、DOM を変更してから、元の stringに警告します。

変更されたコードを取得したい場合は、それをシリアル化して文字列に戻す必要があります。

var htm = '<section><div></div></section>';
var jHtm = $(htm);
jHtm.find('div').addClass('smurf');
// Add to a div so that we can get the innerHTML of that div
var div = jQuery('<div>').append(jHtm);
alert(div.html());
于 2013-04-08T14:23:45.623 に答える
0

あなたのアプローチは機能するはずhtmですが、変数には影響しません。代わりに、結果の jQuery オブジェクトを DOM に追加する必要があります。

var htm = '<section><div></div></section>';
var $htm = $(htm);
$('div', $htm).addClass('smurf');
$('body').append($htm);
于 2013-04-08T14:23:49.033 に答える