How to get entire html of jquery element - php

Question

This is my first post, but I've been using the site for years. However, I'm stuck on what should be a fairly simple problem with pagination. I have a group of links being populated with 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 ? '' . $i . ''
: '<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;
}
And after that, I parse the div with jquery and compress them.
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);
}
I am going to take the elements that are hidden and append them to a div that drops down so that the user can select from them. The problem I'm having is the
content += $(this).html()
It is only returning the inside of the html, as I expect it to, but I don't know what to call on it to return the actual html of the entire element referred to by 'this'. Sorry if it's a dumb question, but I'm stumped.
Thanks in advance for your responses.

Answer 1

Try this:
content += $(this).clone().wrap('<div>').parent().html();
AFAIK, there exists no nice way to get the contents AND the tags of the element using jQuery, so instead we clone the element, wrap it in <div> tags, bump up to the parent (the <div>) and then get its html.

Answer 2

WHy not just use $('#target').append($(this)); ?
If you want the whol element, and not the HTML of the first child then just use the element.
http://api.jquery.com/category/attributes/

Answer 3

content += $(this).parent().html();
And give the element 'this' a dummy wrapper.
Or also try, but it may be unrelated
content += $(this).contents();

Answer 4

I don't see any need to turn individual elements into html strings. Simply use some math and slice() method.
http://api.jquery.com/slice/
EDIT: you should actually do this before inserting the return in your ajax success. Can manipulate the returned html without needing to insert it, then insert after manipulation
Example isn't 100% fine tuned but will look something like this
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());
}