优化jQuery代码 - 重复部分

时间:2012-11-27 16:28:18

标签: javascript jquery optimization jquery-selectors

这更像是一个代码美化问题,但仍然......

我有这个HTML :(缩短)

<div id="sablona" style="display:none;">
    <div style="position:relative;">
        <fieldset>
            <img class="sm_kont" src="../../include/img/remove_16.png" title="Smazat kontakt" alt="Smazat kontakt" />
            <legend></legend>
            <table>
                <tr>
                    <td>
                        <label for="jmeno_n">jméno</label>
                        <input name="jmeno_n" id="jmeno_n" type="text" value="" />
                    </td>
                    <td>
                        <label for="pohlavi_n">pohlaví</label>
                        <select name="pohlavi_n" id="pohlavi_n">
                            <option value="0"></option>
                            <option value="m">muž</option>
                            <option value="z">žena</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <label for="adresa_n">adresa</label>
                        <textarea name="adresa_n" id="zpr_adresa_n" rows="3"></textarea>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
</div>

我想要复制它改变一些关键属性。这是我使用的代码:

var count = 0;

function pridat_kontakt () {
    var novy_kontakt = $("#novy_kontakt").val();
    if (novy_kontakt.length == 0) alert("Typ kontaktu nemůže být prázdný!");
    else {
        var kopie = $("#sablona").children().clone(true);
        kopie.find("legend").text(novy_kontakt);
        kopie.find("label, input, select, textarea").each(function () {
            if (typeof $(this).attr("name") != 'undefined') {
                if ($(this).attr("name").length > 0) {
                    var new = $(this).attr("name") + count;
                    $(this).attr("name", new);
                }
            }
            if (typeof $(this).attr("for") != 'undefined') {
                if ($(this).attr("for").length > 0) {
                    var new = $(this).attr("for") + count;
                    $(this).attr("for", new);
                }
            }
            if (typeof $(this).attr("id") != 'undefined') {
                if ($(this).attr("id").length > 0) {
                    var new = $(this).attr("id") + count;
                    $(this).attr("id", new);
                }
            }
        });
        $("[name='fedit']").append(kopie);
        $("#novy_kontakt").val("");
        count++;
    }
}

一切都很好,它看起来不太好。谁能想到一种美化它的方法?我的意思是.each()部分。

1 个答案:

答案 0 :(得分:2)

您可以声明一个函数并在每个部分中使用它:

var checkAttr = function(jelem, attrName) {
    var attrValue = jelem.attr(attrName);
    if (typeof attrValue != 'undefined' && attrValue.length > 0) {
        var newAttr = attrValue + count;
        jelem.attr(attrName, newAttr);
    }
}
kopie.find("label, input, select, textarea").each(function () {
       var jthis = $(this);
       checkAttr(jthis, "name");
       checkAttr(jthis, "for");
       checkAttr(jthis, "id");
});