如何获取jquery元素的整个html

Posted 2023-05-09

【中文标题】如何获取jquery元素的整个html

【英文标题】：How to get entire html of jquery element

【发布时间】：2012-03-21 10:21:53

【问题描述】：

这是我的第一篇文章，但我已经使用该网站多年。但是，我被困在一个相当简单的分页问题上。我有一组用 php 填充的链接，

function create_pagination($page,$echo=false)
  
    $max_rows = isset($_SESSION['maxListViewRows']) ? $_SESSION['maxListViewRows'] : 15;
    $total_rows = isset($_SESSION['total_rows']) ? $_SESSION['total_rows'] : 1;
    $pages = ceil($total_rows / $max_rows);

    if( $page > $pages) $page = $pages;

    $start_row = $page == 1 ? 1 : ( ($page - 1) * $max_rows ) + 1;

    $rows_disp = ($start_row + $max_rows) <= $total_rows ? ($start_row + $max_rows) - 1 : $total_rows;

    $facility_number_summary = 'Showing ' . $start_row .  ' - ' . $rows_disp  . ' of ' . $total_rows . ' rows.<br /> <p class="carapg">(MESSAGE IRRELEVANT TO THE QUESTION)</p>';

    $pagination_functions = '';

    for($i = 1; $i <= $pages; $i++)
    
        $pagination_functions.= $i != $page ? '<a href="javascript:void(0);" id="page_' . $i . '" class="page_link">' . $i . '</a>'
                                      : '<span class="page_link" id="page_' . $i . '">' . $i . '</span>';
    

    $results =  array('facility_number_summary'=>$facility_number_summary, 'pagination_functions'=>$pagination_functions);

    $returned = '<div id="max_left">'  . $results['facility_number_summary'] . '</div>
                 <div id="max_right">' . $results['pagination_functions'] . '</div>
                 <div class="break"></div>';

    if( $echo ) echo $returned; return; 

    return $returned;
  

然后，我用 jquery 解析 div 并压缩它们。

function draw_pagination(page)

if(page == undefined)
    page = 1;

var postData =   'ajax' : 'pagination',
                  'page' : page              ;

$.ajax(

    type : "POST",

    url  : "/ajax/account.php",

    data : postData,

    success : 
        function(data) 
            $("#fac_results_max").html(data);   
            get_page_count();
        

);



function get_page_count()

var count = $("#max_right").children().length;

if( count < 11 )
    return;

var content = '';
var spacer  = false;

$("#max_right").children().each(
    function(index)
    
        if( $(this).html() > 5 && $(this).html() <= ( count - 5 )  )
        
            $(this).css('display','none');
            if( !spacer )
            
                content += '...';
                spacer = true;
            
        
        else
        
            content += $(this).html();
        
    
);  

$("#max_right").html(content);  

我将获取隐藏的元素并将它们附加到下拉的 div 中，以便用户可以从中选择。我遇到的问题是

content += $(this).html() 

它只返回 html 的内部，正如我所期望的那样，但我不知道如何调用它来返回 'this' 引用的整个元素的实际 html。对不起，如果这是一个愚蠢的问题，但我很难过。

提前感谢您的回复。

【问题讨论】：

你试过用this.outerHTML替换$(this).html()吗？

“jquery element”用词不当——我建议你自学一下为什么。

@Chris jQuery 'Object' 有点像它。但是克里斯……这真的很有建设性吗？

是的；如果一个新程序员认为 jQuery 是与 Javascript 不同的东西，那么他们可能对该语言有一个根本的误解。我不是在拖钓:)

@Chris 说谎...你住在桥下...这不是定义“巨魔”吗...？

【参考方案1】：

试试这个：

content += $(this).clone().wrap('<div>').parent().html();

AFAIK，不存在使用 jQuery 获取元素的内容和标签的好方法，因此我们克隆元素，将其包装在 <div> 标签中，然后碰到父元素（<div>）和然后获取 its html。

【讨论】：

这在 DOM 上做了很多工作，但可能很有效。

如果您愿意，您也可以删除克隆！ :)

这是最简单的解决方案...除了在 DOM 中已经有一个虚拟包装器。

【参考方案2】：

为什么不只使用 $('#target').append($(this)); ?

如果您想要整个元素，而不是第一个子元素的 HTML，那么只需使用该元素。

http://api.jquery.com/category/attributes/

【讨论】：

你的意思是......只使用对象。

这样做是在 .each 方法的每次迭代中强制进行重排（并且可能是重绘），并在最后附加所有内容，这样开销就会减少。另外，你不能只做$('#target').append(this); 吗？

【参考方案3】：

content += $(this).parent().html();

并给元素“this”一个虚拟包装器。

或者也可以试试，但可能不相关

content += $(this).contents();

【参考方案4】：

我认为没有必要将单个元素转换为 html 字符串。只需使用一些数学和 slice() 方法。 http://api.jquery.com/slice/

编辑：您实际上应该在将返回值插入 ajax 成功之前执行此操作。可以对返回的html进行操作，无需插入，操作后插入

示例不是 100% 微调，但看起来像这样

function get_page_count()

    /* cache jQuery objects when needing to search them again for efficiency*/
    var $max=$("#max_right"), $kids=$max.children()
    var count = $kids.length;

    if( count < 11 )
        return;

    var $temp=$('<div/>').append( $kids.slice(0,5)).append('...').append( $kids.slice(- 5,-1)); 

    $max.html(temp.html());