0

興味深いもの。私は、ユーザーがサービスを追加または削除でき、DOM に到達し、HTML 要素をコピーし、それとその子の ID の両方の末尾に値を追加する必要がある、大きなモジュラー フォームに取り組んでいます。

たとえば、次のようになります。

<li id="serviceModule" class="serviceModule">
    <ol>
        <li id="subModuleTypeA">subModule</li>
        <li id="subModuleTypeB">
            <ol>
                <li id="subModuleTypeASubModuleX">subSubModule</li>
                <li id="subModuleTypeASubModuleY">subSubModule</li>
                <li id="subModuleTypeASubModuleZ">subSubModule</li>
            </ol>
        </li>
        <li id="subModuleTypeC">subModule</li>
    </ol>
</li>

次のようになります。

<li id="serviceModule1" class="serviceModule">
    <ol>
        <li id="subModuleTypeA1">subModule</li>
        <li id="subModuleTypeB1">
            <ol>
                <li id="subModuleTypeASubModuleX1">subSubModule</li>
                <li id="subModuleTypeASubModuleY1">subSubModule</li>
                <li id="subModuleTypeASubModuleZ1">subSubModule</li>
            </ol>
        </li>
        <li id="subModuleTypeC1">subModule</li>
    </ol>
</li>

価値を付加する方法:

$.fn.valulator = function(magic){

    var thiis = $(this),
        el,
        id;

    thiis.add(thiis.children()).each(function(){

        el = $(this);
        id = el.attr('id');

        el.attr('id', id + magic);
    });

    return this;
};

トリガーするバインディングvalulator:

$add.click(function(event){

    event.preventDefault();

    $index = $index + 1;
    $('.serviceModule')
        .clone()
        .valulator($index)
        .appendTo('#services');
});

ご協力いただきありがとうございます！ここに jsFiddle があります: http://jsfiddle.net/phqvr/3/

アップデート

私が遭遇した最初の問題valulator()は、children()直接の子孫のみを表示することです..代わりに、すべての要素を検索する必要があります。

4

2 に答える 2

0

以下のコードを使用して、

$(this).find('li').attr('id',$(this).find('li').attr('id')+ magic);

私はフィドルを変更しました、これをチェックしてくださいhttp://jsfiddle.net/B2SdM/

ID1,2,3...などの新しい要素を生成します。

于 2012-11-22T06:22:03.307 に答える
0

とった; 2つの問題がありました。

1) 更新で述べたように、children()1 つのレベルだけをトラバースし、次のように作り直しました。

thiis.find('*').andSelf().each()

2) 私の Fiddle には、if(el[id])常に失敗する追加の条件がありました。最初に ID を持たない要素への追加を防ぐために、以下のコードに置き換えます。

if (id){}

ここの完全な作業コード: http://jsfiddle.net/phqvr/4/

    $.fn.valulator = function(magic){

        var thiis = $(this),
            el,
            id;

        thiis.find('*').andSelf().each(function(){

            el = $(this);
            id = el.attr('id');            

            if (id){

                el.attr('id', id + magic);
            }
        });

        return this;
    };
于 2012-11-22T06:27:10.980 に答える