Javascript 替换克隆元素上所有属性的更好方法？

这段代码是有效的，但对我来说似乎有点长。我只在绝对必要的时候才倾向于编写JS/Jquery，所以我是个不折不扣的傻瓜

我正在克隆一个元素，然后用我创建的属性替换所有属性

以下是JSFIDLE，或下面的代码片段：

HTML:

这里有一个更新的JSFIDLE，其中包含我完成的代码供参考

---

谢谢大家的帮助

简单回答：没有更好的方法了

长答覆：

您可以将jQuery对象分配到一个变量中，这样就不必重复查询选择器

e、 g

变成

var newModInput = $( 'input', $newMod );
newModInput.attr( 'id', $modLabel );
newModInput.attr( 'name', $modLabel );
newModInput.attr( 'value', " ");
newModInput.val( '' );

---

由于不必每次都遍历$newMod来查找输入，因此这也可能稍微更有效。但这还不足以引起注意。

简短的回答：没有更好的方法

长答覆：

您可以将jQuery对象分配到一个变量中，这样就不必重复查询选择器

e、 g

变成

var newModInput = $( 'input', $newMod );
newModInput.attr( 'id', $modLabel );
newModInput.attr( 'name', $modLabel );
newModInput.attr( 'value', " ");
newModInput.val( '' );

---

由于不必每次都遍历$newMod来查找输入，因此这也可能稍微更有效。但这还不足以引起注意。

问题的本质不适合完全自动化，但可以使用一些语法快捷方式来减少重复。而不是：

    $( 'label', $newMod ).attr( 'for', $modLabel );
    $( 'input', $newMod ).attr( 'id', $modLabel );
    $( 'input', $newMod ).attr( 'name', $modLabel );
    $( 'input', $newMod ).attr( 'value', " ");
    $( 'input', $newMod ).val( '' );

尝试：

---

问题的本质不适合完全自动化，但有一些语法捷径可用于减少重复。而不是：

    $( 'label', $newMod ).attr( 'for', $modLabel );
    $( 'input', $newMod ).attr( 'id', $modLabel );
    $( 'input', $newMod ).attr( 'name', $modLabel );
    $( 'input', $newMod ).attr( 'value', " ");
    $( 'input', $newMod ).val( '' );

尝试：

---

您可以大大简化HTML，这可能使您能够简化JavaScript

当前，您有重复的ID，这在HTML中是不允许的：

<li id="equipment-0">
  <label for="equipment-0">Equipment</label>
  <select id="equipment-0" name="equipment-0">
    <option selected value="1">T700</option>
    <option value="3">iLink</option>
  </select>
</li>

---

此时，您只剩下一个在克隆后需要更改的属性。

您可以大大简化HTML，这可能使您能够简化JavaScript

当前，您有重复的ID，这在HTML中是不允许的：

<li id="equipment-0">
  <label for="equipment-0">Equipment</label>
  <select id="equipment-0" name="equipment-0">
    <option selected value="1">T700</option>
    <option value="3">iLink</option>
  </select>
</li>

---

此时，您只剩下一个在克隆后需要更改的属性。

您可以使用把手简化模板，您可以查看此处（） Handlebar与JQuery配合得很好

您可以创建模板（在html中附加此脚本标记）

$equipmentTemplate包含已编译的equipmentTemplate，将带有正确键：值对的json传递给$equipmentTemplate，它将用值替换键

var $eqLabel = 'equipment-' + num;
var eqContext = {eqLabel: $eqLabel};
var eqhtml    = $equipmentTemplate(eqContext);
$( "#eqblock" ).append( eqhtml );

你可以用modblock做同样的事情

---

示例：

您可以使用把手简化模板，您可以在此处查看（） Handlebar与JQuery配合得很好

您可以创建模板（在html中附加此脚本标记）

$equipmentTemplate包含已编译的equipmentTemplate，将带有正确键：值对的json传递给$equipmentTemplate，它将用值替换键

var $eqLabel = 'equipment-' + num;
var eqContext = {eqLabel: $eqLabel};
var eqhtml    = $equipmentTemplate(eqContext);
$( "#eqblock" ).append( eqhtml );

你可以用modblock做同样的事情

---

示例：

@j08691嘿，谢谢你。我不知道有个地方可以放这种东西。@j08691嘿，谢谢你。我不知道有个地方可以放这种东西谢谢。这就是我最后要做的，所以我每个元素只查找一次。谢谢。这就是我最终要做的，所以我只对每个元素进行一次查找。感谢您的建议。不幸的是，我正在使用flask和wtforms生成HTML和表单，所以我不能使用模板，因为select字段的选项最终是从添加到SQLAlchemy模型的值生成的，而这些值反过来又是一个MySQL数据库。感谢您的建议。不幸的是，我正在使用flask和wtforms生成HTML和表单，所以我不能使用模板，因为select字段的选项最终是从添加到SQLAlchemy模型和MySQL数据库的值生成的。非常感谢！你让我意识到我不需要

元素上的任何东西。我最初添加了它以删除整行，但我搜索并找到了一种使用父选择器来完成相同任务的方法。不幸的是，剩下的HTML是由jinja2和wtforms生成的，所以所有其他属性都是自动分配的。非常感谢！你让我意识到我不需要

元素上的任何东西。我最初添加了它以删除整行，但我搜索并找到了一种使用父选择器来完成相同任务的方法。不幸的是，HTML的其余部分是由jinja2和wtforms生成的，因此所有其他属性都是自动分配的。

<script id="equipment-template" type="text/x-handlebars-template">
<li id="{{eqLabel}}">
    <label for="{{eqLabel}}">Equipment</label>
    <select id="{{eqLabel}}" name="{{eqLabel}}">
        <option selected value="1">T700</option>
        <option value="3">iLink</option>
    </select>
</li>
</script>

var equipmentTemplate   = $("#equipment-template").html();
var $equipmentTemplate = Handlebars.compile(equipmentTemplate);

var $eqLabel = 'equipment-' + num;
var eqContext = {eqLabel: $eqLabel};
var eqhtml    = $equipmentTemplate(eqContext);
$( "#eqblock" ).append( eqhtml );