如何使用 Jquery/Javascript 在嵌套元素前面置置

how to prepend nested elements using Jquery/Javascript?

本文关键字：嵌套 元素 前面 Javascript 何使用 Jquery      更新时间：2023-09-26

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

 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 和控制组。最后一个元素获取div、控件组和按钮。没有关于为什么的线索...

 $('.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 ) ) )
     });

试试这个：

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

运行示例

相关文章：