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

Question

This code works, but it just seems a bit long in the tooth to me. I only tend to write JS/Jquery when I absolutely have to, so I'm quite the noob.

I'm cloning an element, then replacing all the attributes with one I've created.

Here's the JSFiddle, or code snippets found below: 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 );
    };
});

Here's an updated JSFiddle with my completed code for reference http://jsfiddle.net/og6Lcof0/4/

Thanks everyone for the help!

Answer 1

The nature of your problem doesn't lend itself to full automation, but there are some syntax shortcuts you can use to reduce repetition. Instead of:

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

Try:

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

Answer 2

You can greatly simplify your HTML, which will probably enable you to simplify your JavaScript.

Currently, you have duplicate IDs, which is not allowed in 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>

You probably don't need an ID for li , so remove it.

You can also remove the labels' for by making the select and input elements a child of the labels. After you've done that, you may no longer need an id on the select and input elements.

That reduces the above HTML to this:

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

At this point, you're left with only one attribute that needs changing after cloning.

Answer 3

Short answer: There isn't really a better way.

Long answer:

You could assign your jQuery objects into a variable so you don't have to repeat the query selector as much.

eg

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

becomes

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

This also could be slightly more efficient due to not having to traverse the $newMod to find the input every time. Not really enough to notice though.

Answer 4

you can simplify templating using handlebars , you can take a look at here( http://handlebarsjs.com/ ) Handlebars works well with JQuery.

you can create template (attach this script tags in 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>

if you see the above template contains the key "eqLabel", these are the dynamic variables replaced by json.

in your domready

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

$equipmentTemplate contains the compiled equipmentTemplate, pass the json with proper key:value pairs to $equipmentTemplate it will replace the keys with values

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

you can do the same with modblock.

example : http://jsfiddle.net/r3n5xjpv/