Question

这是我要用另一个div包装的代码片段

<div class="ge-content ge-content-type-" data-ge-content-type="">
    <div class="what-we-do-box" id="service_box_1_hover_1" data-parentid="1" data-titlecolor="#000" data-titlehovercolor="#000" data-deschcolor="#000" data-deschovercolor="#000" data-iconbgcolor="#2F313A" data-iconhoverbgcolor="#000" data-hoverbgcolor="#2F313A" style="border-color: rgb(40, 143, 235); background-color: rgb(255, 255, 255);">    
    <div class="what-we-do-icon-box" style="background-color: rgb(47, 49, 58);">            <i style="color: #fff;" class="fa fa-cloud"></i></div>     
    <div class="what-we-do-box-content"> 

          <h4 style="color: #000">Enter Title</h4> 

           <p style="color: #000">this is a demo description</p>

           <a style="color: #fff;background-color: #2F313A" href="" class="read-more">Read More</a>    
        </div>
    </div>
</div>

这是我要在上面的代码片段之外包装的html部分。

<div class="component_box_row " data-compName="" id="component_box_row_">
<div class="component-inner ui-state-default">
    <div class="component_panel"> 
        <div class="component_header">
            <i class="fa fa-arrows"></i>
            <i id="'+ggggg+'_edit" class="fa fa-edit"></i> 
            <i id="component_delete" class="fa fa-trash"></i>
        </div>
        <div class="component_body"> 
                    ***-- here i want to the first code snippet --****
        </div> 
    </div>
</div>

所有这一切都需要动态。当页面加载。已执行的第一个代码段。我必须在此之后附加第二个代码段。我怎么处理这个。我试过jquery wrap功能，但我不会为我工作

Answer 1

如果我理解正确，您希望稍后在运行时将现有的元素块包装在另一个代码块中。

试试这个

var ggggg = "";
var wrapper = '<div class="component_box_row " data-compName="" id="component_box_row_">\
<div class="component-inner ui-state-default">\
    <div class="component_panel"> \
        <div class="component_header">\
            <i class="fa fa-arrows"></i>\
            <i id="'+ggggg+'_edit" class="fa fa-edit"></i> \
            <i id="component_delete" class="fa fa-trash"></i>\
        </div>\
        <div class="component_body"> \
        </div> \
    </div>\
</div>';

/* the requested part */
var content = $('.ge-content:first').clone(true);
$('.ge-content:first').remove();
var wr = $(wrapper);
wr.find('.component_body:first').append(content);
$('body').append(wr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ge-content ge-content-type-" data-ge-content-type="">
    <div class="what-we-do-box" id="service_box_1_hover_1" data-parentid="1" data-titlecolor="#000" data-titlehovercolor="#000" data-deschcolor="#000" data-deschovercolor="#000" data-iconbgcolor="#2F313A" data-iconhoverbgcolor="#000" data-hoverbgcolor="#2F313A" style="border-color: rgb(40, 143, 235); background-color: rgb(255, 255, 255);">    
    <div class="what-we-do-icon-box" style="background-color: rgb(47, 49, 58);">            <i style="color: #fff;" class="fa fa-cloud"></i></div>     
    <div class="what-we-do-box-content"> 

          <h4 style="color: #000">Enter Title</h4> 

           <p style="color: #000">this is a demo description</p>

           <a style="color: #fff;background-color: #2F313A" href="" class="read-more">Read More</a>    
        </div>
    </div>
</div>

Answer 2

$( '.component_body' ).append('<div class="ge-content ge-content-type-" data-ge-content-type="">
    <div class="what-we-do-box" id="service_box_1_hover_1" data-parentid="1" data-titlecolor="#000" data-titlehovercolor="#000" data-deschcolor="#000" data-deschovercolor="#000" data-iconbgcolor="#2F313A" data-iconhoverbgcolor="#000" data-hoverbgcolor="#2F313A" style="border-color: rgb(40, 143, 235); background-color: rgb(255, 255, 255);">    
    <div class="what-we-do-icon-box" style="background-color: rgb(47, 49, 58);">            <i style="color: #fff;" class="fa fa-cloud"></i></div>     
    <div class="what-we-do-box-content"> 

          <h4 style="color: #000">Enter Title</h4> 

           <p style="color: #000">this is a demo description</p>

           <a style="color: #fff;background-color: #2F313A" href="" class="read-more">Read More</a>    
        </div>
    </div>
</div>');

在jquery中包装div子外的div

2 个答案: