获取div内容然后进行修改

时间:2013-04-02 12:12:16

标签: jquery html

场景是,我想获取div内容,然后修改它以便将其插入另一个div中。 代码如下:

$("#loupe").live("click",function(){
    $('#divBody').empty();
    $('#divTitle').empty();
    var title = $(this).closest('div').find('.stepTitle').text();
    var divContent = $(this).closest('div').html();
    // code to modify the content to be inserted in the modal 
    $('#divBody').append(divContent);
    $('#divTitle').append(title);
    $('#div').modal({ dynamic: true });
});

更详细地说,第一个div包含一个标题,我想在将内容插入新div之前将其删除,因此新div必须包含没有标题的内容

<div>
    <h4 class="StepTitle">Planing des congés pour le service de <%=service.getNomService() %> au <%=month%> / <%=year%>   
        <span style="float: right;">
            <i class="icon-white icon-search" style="cursor: pointer;" id="loupe"> </i>  
            <i class="icon-white  icon-remove" style="cursor: pointer;" onclick="$(this).closest('div').remove();"> </i> 
        </span>  </h4>  
    <table border="1" style="border-color: gray;">
    </table> 
</div>

// * ** * ** * **** * div内容将被插入

<div id="div" class="modal hide fade" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="divTitle">
            //here the title
        </h3>

    </div>
    <div id="divBody" class="modal-body">
        here the other content
    </div>
    <div  class="modal-footer">
        <input type="button" class="btn" class="close" data-dismiss="modal" value="fermer">
    </div>
</div>  

1 个答案:

答案 0 :(得分:1)

jQuery允许您处理页面的片段(以及XML)。

一旦使用.html方法将元素的HTML分配给变量,就可以对HTML进行操作:

var html, withoutTitle;
html = $('#someDiv').html();
withoutTitle = $(html).remove('#title').html();
$('#someOtherDiv').html(withoutTitle);

我没有测试过这段代码,因此您可能需要稍微调整一下以适合您的目的。