Как получить содержимое 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++;
 });

Я хочу получить содержимое HTML между двумя идентификаторами. После этого я хочу добавить к этому HTML в div с классом "content" удалите выходящий HTML и вставьте после идентификатора HTML новый div, Сейчас outerHtml возвращается undefined, Что я должен делать?

Это HTML-код, сгенерированный плагином jQgrid:

Answer 1

Вы можете использовать свойство 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);

Это будет включать HTML обоих узлов с id1 и id2.

Answer 2

.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 3

У объекта jQuery нет свойства outerHTML. Для получения собственности вы можете использовать метод проп. $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);    
});