0

jquery を使用して、条件によって動的要素を構築または作成するより良い方法があります。純粋な JavaScript で記述されたコードを以下に示します。

if (some_var == some_condition) {
 document.write("<tr>");
 document.write("<td></td>");
 document.write("<td>");
 document.write("<input type='BUTTON' onclick='CheckForm(this.form)' value='Enter'>");
 document.write("<input type='reset' value='Cancel'>");
 document.write("</td>");
 document.write("</tr>");
}

多くのコードがこのように書かれている場合、私はウェブページに苦労しています...そして、より良い構造を置き、このコードを理解可能なブロックに整理したいと思います。そのため、動的なデザイン、マークアップ、およびコードをクリーンなアプローチで処理する必要があります。

jqueryを使用して上記のコードを変更して、より効率的で効率的にするにはどうすればよいですか?

必要に応じてさまざまな html 要素を作成するために jquery を使用するのに役立つリソースや記事はありますか?

4

3 に答える 3

1

あなたが使用している必要がありますdocument.createDocumentFragment()

このようにして、HTML をビルドし、必要に応じて追加することができます。 

var data = document.createDocumentFragment();
data.appendChild('<tr><td>hello</td></tr>');
document.getElementById("some-table").appendChild(data);

コストがかかるため、DOM を継続的に操作するべきではありません。

ドキュメントフラグメント

于 2013-01-28T14:50:24.283 に答える
1

jQuery で html 要素を作成するには 2 つの方法があります。自分に最適な方法を使用してください。最初のオプションは高速です。

1

var $td = $('<tr><td>Hello world</td></tr>');

2

var $tr = $('<tr/>');
var $td = $('<td/>').text('Hello world');

次に、簡単に行うことができます

$tr.append($td);

など...単純化された例ですが、アイデアはわかります。詳しく説明してほしい場合はお知らせください。

于 2013-01-28T14:43:23.120 に答える
0

可能であれば、ドキュメント内に HTML を保持し、CSS を介してその可視性をトリガーすることができます。たとえば、次のようになります。

HTML

<tr class="onCondition">Rest of the HTML</tr>

CSS

.onCondition.hidden { display: none; }

JS

if (someCondition) { $('.onCondition').addClass('hidden'); } // or .hide() and without CSS

もちろん、このアプローチは論理的に逆にも機能します。

于 2013-01-28T14:49:56.970 に答える