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

Question

这段代码很有效，但在我看来，它似乎有点长。我只倾向于在绝对必要的时候编写JS/Jquery，所以我是个菜鸟。

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

下面是JSFiddle或代码片段，如下所示：http://jsfiddle.net/og6Lcof0/3/

HTML：

<div id="eqblock" style="display:inline-block">

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

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

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

</div>
<div id="modblock" style="display:inline-block">

  <li id="mod-0"><label for="mod-0">Method of Delivery</label> <input id="mod-0" name="mod-0" type="text" value="mod1">  <a href="#" id="remove_eq_0">Remove</a></li>

  <li id="mod-1"><label for="mod-1">Method of Delivery</label> <input id="mod-1" name="mod-1" type="text" value="mod2">  <a href="#" id="remove_eq_1">Remove</a></li>

  <li id="mod-2"><label for="mod-2">Method of Delivery</label> <input id="mod-2" name="mod-2" type="text" value="mod3">  <a href="#" id="remove_eq_2">Remove</a></li>

</div>

<a href="#" id="add_eq">Add Equipment</a>

联合来文/联合来文：

$( "#add_eq" ).click(function () {
    var num = findNum();
    if (typeof num !== 'undefined') {
        var $eqLabel = 'equipment-' + num;

        var $newEq = $( '#eqblock li:first' ).clone( false );
        $( $newEq ).attr( 'id', $eqLabel );
        $( 'label', $newEq ).attr( 'for', $eqLabel );
        $( 'select', $newEq ).attr( 'id', $eqLabel );
        $( 'select', $newEq ).attr( 'name', $eqLabel );
        $( "#eqblock" ).append( $newEq );

        var $modLabel = 'mod-' + num;
        var $newMod = $( '#modblock li:first' ).clone( false );
        $( $newMod ).attr( 'id', $modLabel );
        $( 'label', $newMod ).attr( 'for', $modLabel );
        $( 'input', $newMod ).attr( 'id', $modLabel );
        $( 'input', $newMod ).attr( 'name', $modLabel );
        $( 'input', $newMod ).attr( 'value', " ");
        $( 'input', $newMod ).val( '' );
        $( 'a', $newMod ).attr( 'id', 'remove_eq_' + num);
        $( "#modblock" ).append( $newMod );
    };
});

，这是一个更新的JSFiddle，其中有我已完成的供参考的代码 http://jsfiddle.net/og6Lcof0/4/

谢谢大家的帮助！

Answer 1

问题的本质并不是完全自动化的，但是有一些语法快捷键可以用来减少重复。而不是：

    $( '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,
            name: $modLabel,
            value: " "
        })
       .val( '' );

Answer 2

您可以极大地简化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>

您可能不需要li的ID，所以删除它。

还可以通过使select和input元素成为标签的子元素来移除标签的select。在这样做之后，您可能不再需要id上的select和input元素。

这将上面的HTML简化为：

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

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

Answer 3

简短的回答:没有更好的方法了。

较长的答覆：

您可以将jQuery对象赋值到变量中，这样就不必重复查询选择器。

例如：

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

变成了

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

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