替換克隆元素上所有屬性的更好方法？

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>

JS / JQ：

$( "#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中不允許使用這些ID：

<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，因此將其刪除。

您還可以刪除標簽for通過使select和input元素的標簽的孩子。 完成此操作后，可能不再需要select和input元素上的id 。

這將上述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來查找輸入，因此這也可能稍微更有效。 雖然還不足以引起注意。

Answer 4

您可以使用handlebars簡化模板，您可以在此處看看（ http://handlebarsjs.com/）Handlebars與JQuery配合良好。

您可以創建模板（在html中附加此腳本標簽）

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

如果您看到上面的模板包含鍵“ eqLabel”，則這些是被json替換的動態變量。

在你的家中

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

$ equipmentTemplate包含已編譯的equipmentTemplate，將帶有正確key：value對的json傳遞給$ equipmentTemplate，它將使用值替換密鑰

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

您可以使用modblock進行相同的操作。

示例： http ： //jsfiddle.net/r3n5xjpv/