Question

只是想知道是否有比这更好的方法：

 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 ) ) )
     });

Answer 1

试试这个：

纯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'));

example

<强>模板

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'));

example

用于编辑（模板）

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);
});

run example

如何使用Jquery / Javascript预先嵌套嵌套元素？

1 个答案: