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

Question

这是我的js代码：

    $("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++;
 });

我想获取两个ID之间的HTML内容。之后，我想将此HTML添加到div，其中包含类＆＃34;内容＆＃34;，删除现有的HTML，然后在ID后面插入新的div HTML。现在outerHtml返回undefined。我该怎么办？

这是jQgrid插件生成的htnml代码：

Answer 1

.outerHTML不是jQuery选择的属性。

以下是将选区从一个地方移动到另一个地方的方法：

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

Answer 2

您可以使用jQuery和Javascript outerHTML属性。如果两个节点处于同一级别：

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);

这将包括id1和id2的两个节点的html。

Answer 3

jQuery对象没有outerHTML属性。要获得该属性，您可以使用prop方法。 $collection.prop('outerHTML')。请注意，prop作为getter返回第一个匹配元素的值，因此您应该遍历集合并单独读取属性。

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

请注意，div元素不能有tr个孩子！

您还可以使用索引和eq方法获取下一个元素：

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