如何获取jquery元素的整个html

Question

这是我的第一篇文章，但我已经使用该网站多年。但是，我被困在一个相当简单的分页问题上。我有一组用 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。对不起，如果这是一个愚蠢的问题，但我很难过。

提前感谢您的回复。

Answer 1

试试这个：

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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