jQueryでこのリスト項目を作成して追加する方が効率的ですか？

Question

私はルールを作成し、これらのルールをリストに追加できるjquery関数を作成しています。私は現在、関数内に長い形式のリスト項目htmlを書いていますが、それはどのように意図されているか正確に動作しますが、htmlのすべてを書き出すよりも、この新しいリスト項目を作成する方が効率的/ ？探しているため

var li = jQuery('<li>').html('<div id\="rule-desc\">' + desc + '</div>' 
         +'<input type=\"button\" class=\"remove-rule\" value=\"Remove\" />' 
        + '<input type=\"hidden\" name=\"rule['+ index + '][type]" value="' + rule_type + '"/>' 
         + '<input type=\"hidden\" name=\"rule['+ index + '][value]" value="' + value + '"/>' 

jQuery("#element-rules").append(li); 

ありがとう：ここ

は、私が現在使用しているコードです。

Answer 1

これは、mustache.jsやhandlerbars.jsのような定番のようです。あなたが使用していた場合、たとえば、ハンドルバーは、あなたのコードは次のようになります。

// Once, compile the template 
var template = ' 
    <div id="rule-desc">{{desc}}</div> 
    <input type="button" class="remove-rule" value="Remove" /> 
    <input type="hidden" name="rule[{{index}}][type]" value="{{rule_type}}" /> 
    <input type="hidden" name="rule[{{index}}][value]" value="{{value}}" />'; 

var $ruleset = Handlebars.compile(template); 

// Then, whenever you build your rule: 
jQuery("#element-rules").append(jQuery("<li>").html($ruleset({ 
    desc: desc, 
    index: index, 
    value: value, 
    rule_type: rule_type 
})); 

基本的な考え方は、テンプレートを構築し、その後、コンパイル済みのテンプレートにプロパティのハッシュを渡すことでHTMLを生成することであるから、あなたはHTMLを返す。このようなことを大規模に管理するのは非常に簡単です。

Answer 2

var li=$("<li/>").append(

$("<div/>",{id:"id",}).html(desc).append(
$("input[type="button"]",{class:"remove-rule",value:"Remove"}).append(
$("input[type="hidden"]",{name:"rule",value:rule_type}).append(
$("input[type="hidden"]",{name:"rule",value:value}) 

）; ）; ）;

$("#element-rules").append(li); 

私はhaventははそれをテストしたが、基本的な考え方は、あなただけのためのHTMLを含む文字列を追加することであろう.append()

http://api.jquery.com/append/

http://www.electrictoolbox.com/jquery-append-add-text-to-element/

Answer 3

最も効率的な方法を使用することができますです追加するリスト要素。さらに高速化するために、コードを追加する関数がアクセス可能な変数にターゲット要素を格納することができます。すなわち：

var list = jQuery("#element-rules"); 
function addStuff(desc, rule_type, index, value){ 
    list.append(
     '<li>'+ 
      '<div id\="rule-desc\">' + desc + '</div>' 
      +'<input type=\"button\" class=\"remove-rule\" value=\"Remove\" />' 
      + '<input type=\"hidden\" name=\"rule['+ index + '][type]" value="' + rule_type + '"/>' 
      + '<input type=\"hidden\" name=\"rule['+ index + '][value]" value="' + value + '"/> 
     '<li>' 
    ); 
} 

これは、両方のは、最も効率的に内部のコンテンツと新しいjQueryのノードを作成し、そこに新しいリスト項目を追加するたびに要素を検索することが必要で離れません。