1

これよりも良い方法があるかどうか疑問に思っています：

 var $lftWrp = $( document.createElement( "div" ) ),
     $ctrlGrp = $( document.createElement( "div" ) ),
        .attr({'data-role':'controlgroup', 'data-type':'horizontal'})
        .controlgroup(),
     $buttons = $('.someButtons');

 $(this).prepend( $lftWrp.prepend( $ctrlGrp.prepend( $buttons ) ) )

このようなものを取得するには：

 <div>
   <div data-role="controlgroup" data-type="horizontal">
       <a href="#" class="someButtons">Click</a>
       <a href="#" class="someButtons">Click</a>
   </div>
 </div>

具体的には、 prepends（）を「ネスト」するよりも良い方法はありますか？

手伝ってくれてありがとう！

編集： プリペンドは次のようになります。具体的には、私の問題は、ボタンが最後の各反復でのみ追加されることであるようです。他のすべての要素は、divとcontrolgroupを取得します。最後の要素は、div、controlgroup、およびbuttonsを取得します。理由についての手がかりはありません...

 $('.fiveElemnts').each(function() {

     var $lftWrp = $( document.createElement( "div" ) ),
        $ctrlGrp = $( document.createElement( "div" ) ),
          .attr({'data-role':'controlgroup', 'data-type':'horizontal'})
          .controlgroup(),
        $buttons = $('.someButtons');
     //if I log buttons here, they are there
     console.log( $buttons );
     $(this).prepend( $lftWrp.prepend( $ctrlGrp.prepend( $buttons ) ) )
     });
4

1 に答える 1

2

これを試して：

純粋な js / jQuery

HTML:

<div class="button-container" style="display:none;">
   <a href="#" class="someButtons">Click</a>
   <a href="#" class="someButtons">Click</a>
</div>

<div class="result">
</div>​

JS:

$.fn.controlgroup = function() {
    return this;
};

(function() {

    var 
        $template = $('<div><div></div></div>'),
        $buttons = $('.someButtons');

    $template
        .find('>div')
        .attr({'data-role':'controlgroup', 'data-type':'horizontal'})
        .controlgroup()
        .append($buttons);

    $(this).prepend($template);

}).call($('.result'));    
​

例

テンプレート

HTML

<div class="button-container" style="display:none;">
       <a href="#" class="someButtons">Click</a>
       <a href="#" class="someButtons">Click</a>
</div>

<div class="template-container" style="display:none;">
    <div>
       <div data-role="controlgroup" data-type="horizontal"></div>
    </div>
</div>

<div class="result">
</div>

JS

$.fn.controlgroup = function() {
    return this;
};

(function() {

    var 
        $template = $('.template-container').find('>div').clone(),
        $buttons = $('.someButtons');

    $template.find('>div').controlgroup().append($buttons);

    $(this).prepend($template);

}).call($('.result'));
​

例

編集用（テンプレート）

HTML:

<div class="button-container" style="display:none;">
    <a href="#" class="someButtons">Click</a>
    <a href="#" class="someButtons">Click</a>
</div>

<div class="template-container" style="display:none;">
    <div>
       <div data-role="controlgroup" data-type="horizontal"></div>
    </div>
</div>

<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>
<br />
<div class="fiveElemnts"></div>

JS:

$.fn.controlgroup = function() {
    return this;
};

var
    $template = $('.template-container').find('>div'),
    $buttons = $('.someButtons');

$('.fiveElemnts').each(function(i, el) {

    //template
    var 
        $templateForThisUse = $template.clone();

    //example append
    /*    
    var $buttonsForThisUse = $buttons.clone();
    $templateForThisUse.find('>div').controlgroup().append($buttonsForThisUse);
    */

    //best append - form link control
    var $ref = $templateForThisUse.find('>div').controlgroup();
    $buttons.clone().each(function(ib, eb) {
        $(this)
            .bind('click', function(event) {
                console.log('fiveElemnts('+i+') -> link ('+ib+')');
            })
            .appendTo($ref.append('&nbsp;<spam>link ('+i+'-'+ib+'): </spam>'));
    });


    $(this).prepend($templateForThisUse);
});

​

実行例

于 2012-04-14T18:06:03.753 に答える