jQuery: простая замена тегов

Question

Я просто хочу заменить все <p> теги на <tr>

function test() {
$("p").each(function(index) {
var htmlStr = $(this).html();
$(this).replaceWith("<tr>" + htmlStr + "<\/tr>");
});
}

Это не работает.замена работает, но html-содержимое тегов <p> удалено.поэтому вывод будет примерно таким: <tr></tr>

Кроме того, эта функция будет проходить по всей HTML-странице, верно?Я просто хочу, чтобы это было обработано на моем #content_div.Что я должен добавить или до $("p")?

Answer 1

Это потому, что <TR> не может содержать ничего, кроме <TH> или <TD>. jsFiddle

function test() {
    $("#content_div").find('p').each(function(index) {
        var htmlStr = $(this).html();
        $(this).replaceWith("<tr><td>" + htmlStr + "</td><\/tr>");
    });
}

Answer 2

Я немного поэкспериментировал и подумал, что вы можете использовать функцию обтекания jQuery, чтобы добавить тег вокруг элемента.Это оставило бы теги абзаца на месте, но это, вероятно, не ваша главная задача.Это приводит к некоторому очень простому коду кода:

$("#content_div p").wrap("<tr>");

Однако это не имеет смысла, как отмечено в других постах, поскольку вам, вероятно, также нужен тег TD и, возможно, тег таблицы вокруг всех элементов.,Ваш код будет выглядеть так:

$("#content_div p").wrapAll("<table>");
$("#content_div p").wrap("<tr><td>");

Answer 3

ненадежно манипулировать HTML напрямую через функции поиска / замены - любые проанализированные атрибуты в HTML могут нарушить код ..

я бы выбрал это так ... учитывая любую пустую целевую таблицуиз

<table>
    <tbody></tbody>
</table>

используйте этот javascript

function test() {
    $("p").each(function(index) {
        $("tbody").append($("<tr></tr>").html(this.innerHTML));
        $(this).remove();
    });
}

см. скрипку здесь

Answer 4

Вы, вероятно, не видите контента, потому что вы создаете контент в теге tr в качестве примера здесь http://jsfiddle.net/Pf5n3/

Для показа контента вам понадобится контент в формате td, если вы этого не делаетеуже в тр как этот http://jsfiddle.net/Pf5n3/1/