javascript - 如何获取两个 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带有“内容”类的内容中，删除现有的 HTML，并在 ID 之后插入新的div. 现在outerHtml返回undefined。我应该怎么办 ？

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

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