有更好/更有效的方式來創建和附加這個列表項與jQuery？

我正在創建一個jquery函數，它允許用戶創建規則並將這些規則附加到列表中。我目前在函數內部以長格式寫入列表項html，它的工作原理正是如此，但我想知道是否有更好/更有效的方式來創建這個新的列表項，而不是寫出所有的html ？有更好/更有效的方式來創建和附加這個列表項與jQuery？

這是我目前使用的代碼：

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);

感謝您尋找。

來源

2011-02-01 Paul Atkins

你可以使用jQuery模板http://api.jquery.com/category/plugins/templates/ – generalhenry 2011-02-01 19:16:24

這看起來像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。它使這種事情的大規模管理非常容易。

來源

2011-02-01 19:20:11

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);

我還沒有測試，但其基本思路是，你可以使用.append()

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

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

來源

2011-02-01 19:22:33 Rafay

嗨，我剛剛測試過你的代碼，但它只會追加第一個div但不是輸入 – 2011-02-01 20:10:12

我編輯過回答現在嘗試一下... – Rafay 2011-02-02 04:08:58

最有效的方法是隻追加包含用於在HTML字符串列表元素添加。爲了增加快速性，可以將目標元素存儲在附加代碼的函數可訪問的變量中。即：

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節點，並摒棄了需要每次添加新的列表項，它的時間來查找元素。

來源

2011-02-01 19:23:03

有更好/更有效的方式來創建和附加這個列表項與jQuery？

回答

相關問題