如何获取两个ID之间的HTML内容？

Question

This is my js code:

    $("tr[id^=list2ghead_]").each(function(){
                    j = i+1;
                    id_name = $(this).attr("id");
                    id_name_lenght = id_name.length;
                    if (i >= 10){
                        id_name = id_name.substr(0, id_name_lenght-2);
                    }else{
                        id_name = id_name.substr(0, id_name_lenght-1);
                    }
                    html = $("#"+id_name+i).nextUntil("#"+id_name+j).outerHTML;
                    $("#"+id_name+i).nextUntil("#"+id_name+j).remove();
                    html = "<div class='content'>"+html+"</div>";
                    $(html).insertAfter("#"+id_name+i);
                    i++;
 });

I want to get the HTML content between two IDs. After that I want to add to this HTML to a div with a class "content", remove the exiting HTML, and insert after an ID the HTML the new div . Now outerHtml returns undefined . What should I do ?

This is htnml code generated by jQgrid plugin:

Answer 1

.outerHTML is not a property of a jQuery selection.

Here is a way to move a selection from one place to another :

var $div = $('<div class="content"></div>');
var $selection = $("#"+id_name+i).nextUntil("#"+id_name+j);
$div.append($selection).insertAfter("#"+id_name+i);

Answer 2

You could use jQuery and Javascript outerHTML property. If both nodes are at the same level:

var theHtml = "";
var id1 = "beginId";
var id2 = "endId";
var $node = $("#" + id1);
var nodes = new Array();
while($node.attr("id") != id2)
{
    nodes.push($node);
    theHtml += $node.get(0).outerHTML;
    $node = $node.next();
}
nodes.push($node); // Edit: also add the second node to the list
theHtml += $node.get(0).outerHTML; // Get the HTML of node with id2

$.each(nodes, function() {
    $(this).remove();
});

$(".content").attr("id","theHtml").html(theHtml);

This will include the html of both nodes with id1 and id2.

Answer 3

jQuery object doesn't have outerHTML property. For getting the property you can use the prop method. $collection.prop('outerHTML') . Note that prop as getter returns value of the first matched element, so you should iterate through the collection and read the properties individually.

var outerHTML = $("#"+id_name+i).nextUntil("#"+id_name+j).map(function() {
    return this.outerHTML;
}).get().join('');

Note that div element can't have tr children!

You could also get the next element using indexes and eq method:

var $col = $("tr[id^=list2ghead_]");

$col.each(function(i) {
   var $next = $col.eq(i + 1);
   var $between = $(this).nextUntil($next); //.filter('.jqrow');
   var outerHTML = $between.map(function() {
        return this.outerHTML;
  }).get().join(''); 

  console.log(outerHTML);    
});