web-dev-qa-db-ja.com

JQueryを使用してリンクを作成する最良の方法は？

JqGridカスタムフォーマッタを使用して、JQueryグリッドにリンクを出力します。文字列操作を使用してリンクを構築するだけです：

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId + "')\">This is blah<a>";

JQueryを使用してリンク（および他のフォーム要素）を作成する、より「賢い」方法はありますか？

jqueryjqgrid
23
Marcus Leon

Steven Xuが正しく述べたように、HTML文字列の挿入はDOMの操作よりも速いため、jQueryではなく文字列操作で要素を作成することをお勧めします。

これを変更するだけです：

_var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah<a>";
_

これに：

_var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah</a>";
_

（文字列の最後に_<a>_タグを付けて_</a>_タグを閉じます）。

文字列操作は、DOM操作よりはるかに高速です（たとえば、 this を参照）。さらに、大きなHTMLコードの途中にDOMフラグメントを挿入しようとすると、違いはさらに大きくなります。 DOM DocumentFragments を使用するとパフォーマンスが少し向上しますが、文字列連結の使用が最も速い方法です。

他のすべての回答は、使用するコンテキスト（jqGridカスタムフォーマッタ）に関する知識なしに彼の回答を書きました。それがあなたの場合に重要である理由を説明しようとします。

パフォーマンス上の利点のため、jqGridはまずグリッドのHTMLコードフラグメントを文字列の配列として構築し、次に.join('')に関して文字列配列から1つの文字列を構築し、その結果をテーブルボディの最後に挿入しますすべてのみ。 （ほとんど常に推奨される gridview：true jqGridオプションを使用すると仮定します）。 jqGridカスタムフォーマッタ は、グリッド（テーブル）本体の構築中にjqGridによって使用されるコールバック関数です。カスタムフォーマッタは、結果としてstringとしてHTMLコードフラグメントを返す必要があります。文字列は、グリッドの本体（テーブル）を構築する他の文字列と連結されます。

そのため、現在のコードを純粋な文字列操作からjQuery DOM操作に変更し、結果を文字列（カスタム書式設定の結果として返される必要がある）に変換すると、コードの動作が遅くなり、他の利点がなくなります*。

文字列操作を使用することの唯一の本当の欠点は、ビルドするコードの検証の問題です。たとえば、終了タグ_</a>_なしのコードの使用は、潜在的な問題である可能性があります。ほとんどの場合、DOMフラグメントの挿入中に問題は解決されますが、実際の問題が発生する場合があります。したがって、非常に慎重に挿入したコードをテストする必要があります。

もう1つ注意してください： 控えめなJavaScriptスタイル に従う場合は、href属性の値として「＃」を使用し、対応するclickイベントをgridCompleteまたはloadCompleteイベントハンドラー。この実装に問題がある場合は、新しい質問を開いて、対応するコード例を書いてみます。

注：最適な実装方法は、列内のすべての_<a>_要素にonCellSelectイベントをバインドする代わりに、beforeSelectRowまたはclickを使用することです。詳細については、次の回答を読むことをお勧めします。 this one 、 another one および one one old answer 。

15
Oleg

私は最高だと思う

_$('<a>',{
    text: 'This is blah',
    title: 'Blah',
    href: '#',
    click: function(){ BlahFunc( options.rowId );return false;}
}).appendTo('body');
_

ライブ例at http://www.jsfiddle.net/gaby/RhWgf/

インラインjavascriptを添付ハンドラーに置き換えました

jQuery（） に関するドキュメントからの引用

jQuery（html、props）

html単一のスタンドアロンを定義する文字列、[〜＃〜] html [〜＃〜]要素（例_<div/>_または_<div></div>_）。
props新たに呼び出す属性、イベント、およびメソッドのマップ-作成された要素。

更新

リンクの実際のテキストが必要な場合は、それをdivにラップして、その.html()を返す必要があります。

（代わりに：raw要素の_.outerHTML_プロパティへのアクセスを使用できます）

完全な例at http://www.jsfiddle.net/gaby/RhWgf/1/ （文字列バージョンでは失われるため、クリックハンドラーを削除し、特定の種類のリンクをターゲットとするliveハンドラーに置き換えました）

99
Gabriele Petrioli
jQuery('<a>').attr('href', 'url').text('blah')

Jqueryオブジェクトを作成し、.appendを使用してそれをdomに追加するだけです。

11
shoebox639

私の好ましい方法はこれです：

$("<a>", {
  title: "Blah",
  href: "javascript:BlahFunc('" + options.rowId + "')"
  }).append( "This is blah" );

この記事には良い情報があります：
http://marcgrabanski.com/articles/building-html-in-jquery-and-javascript

8
TJB

一般に、HTML文字列の挿入はより高速で、複数のDOMインジェクションとDOM操作が行われます。これが、このjQuery DOM操作に相当します。これらの500個を挿入する場合、パフォーマンスの面で最適なオプションは、HTML文字列を準備してからHTMLを追加することです。

しかし、あなたの単純な目的のために、あなたの現在のオプションはあなたにぴったりです。賢い人のために、新しい要素でjQueryのDOM操作ライブラリを使用できます。以下の例は一目瞭然ですが、特定の領域について明確にされていない場合は、コメントを残してください。

var toBeAdded = [
  { title: "one", row: 1, content: "ONE" },
  { title: "two", row: 2, content: "TWO" },
  { title: "three", row: 3, content: "THREE" }
];

var s = toBeAdded.length;
for(i=0;i<s;i++) {
  var a = $('<a>');
  a.attr('title', toBeAdded[i].title);
  a.attr('rel', toBeAdded[i].row);
  a.text(toBeAdded[i].content);
  a.addClass('blah_class');
  a.appendTo($('body'));
}

そして、あなたの普遍的なスクリプトで：

$('a.blah_class').live('click', function(){
  var rel = $(this).attr('rel');
  BlahFunc(rel);
});
1
Steven