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之类的主要案例。如果您使用的是Handlebars，那么您的代码将如下所示：

// 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

最有效的方法是只添加一个包含要添加的列表元素的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节点，并且在每次向其添加新列表项时都不需要查找元素。

Answer 3

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/

是否有更好/更有效的方法来使用jQuery创建和附加此列表项？

3 个答案: