Как изменить типы тегов с помощью jQuery

Question

Как изменить типы тегов с помощью jQuery

0

Поэтому на моем сайте есть редактор HTML (редактор WYSIWYG), который действительно не отвечает так, как должен быть.

В основном, он загружает все мои разделы в оболочку fieldset, что является фантастическим, но затем он также создает все разделы в виде fieldset. Мне нужно разбить этот раздел и преобразовать его в список описаний, dl.

Вот как это сейчас выглядит:

<fieldset>
    <legend>Our Services</legend>
    <fieldset>
        <legend>Some title here</legend>
        <p>Some long text here...</p>
        <p>Some long text here...</p>
    </fieldset>
    <fieldset>
        <legend>Some title here</legend>
        <p>Some long text here...</p>
        <p>Some long text here...</p>
    </fieldset>
    <fieldset>
        <legend>Some title here</legend>
        <p>Some long text here...</p>
        <p>Some long text here...</p>
    </fieldset>
    <fieldset>
        <legend>Some title here</legend>
        <p>Some long text here...</p>
        <p>Some long text here...</p>
    </fieldset>
</fieldset>

Вот как конвертированная версия должна выглядеть так:

<fieldset>
    <legend>Our Services</legend>
    <dl>
        <dt>Some title here</dt>
        <dd><p>Some long text here...<p></dd>

        <dt>Some title here</dt>
        <dd><p>Some long text here...<p></dd>

        <dt>Some title here</dt>
        <dd><p>Some long text here...<p></dd>

        <dt>Some title here</dt>
        <dd><p>Some long text here...<p></dd>
    </dl>
</fieldset>

Я знаю, что мне нужно использовать такие функции, как replaceWith и wrap, хотя я просто не уверен, как подойти к этому.

Созданная функция будет запущена, когда документ будет готов и все это преобразит. Я не идеал, но эй, это будет.

Я не прошу кого-нибудь написать мне огромный кусок кода, я в основном прошу дать рекомендации о том, как подойти к этому.

Fizzix 21 март 2014, в 01:04

Источник

5

какое отношение этот заголовок имеет к этому вопросу?
Gabriele Petrioli 20 март 2014, в 23:49
1

здесь есть Some long text here... Some long text here... но желаемый результат у вас есть <dd>Some text here</dd>
Arun P Johny 20 март 2014, в 23:49
0

@ GabyakaG.Petrioli - Извините, заголовок был из предыдущего поста. Меняется сейчас.
Fizzix 20 март 2014, в 23:49
1

Что вы имеете в виду, что у вас есть «редактор HTML» на вашем сайте?
Sparky 20 март 2014, в 23:50
0

@Sparky - Сложно объяснить, но мои клиенты могут изменять контент через WYSIWYG-редактор.
Fizzix 20 март 2014, в 23:51
0

Вы имеете в виду, что веб-сайт содержит CMS? Если ты не можешь объяснить это ...
Sparky 20 март 2014, в 23:51
0

@ArunPJohny - Извини, все почистил. Утром пятницы мозги не работают должным образом.
Fizzix 20 март 2014, в 23:52
0

@ Sparky - Не обязательно. Это очень маленькая CMS, которую мы создали.
Fizzix 20 март 2014, в 23:52
0

Так почему бы не исправить причину, вместо того, чтобы поучаствовать в DOM после свершившегося факта?
Sparky 20 март 2014, в 23:53
0

см. jsfiddle.net/arunpjohny/DuzTd/1
Arun P Johny 20 март 2014, в 23:53
0

@ Sparky - Почти невозможно, так как редактор не был создан нами, и потребовались бы дни возни, чтобы найти корень проблемы. Нам нужно применить исправление сейчас, пока мы ищем источник проблемы.
Fizzix 20 март 2014, в 23:54
0

Хорошо, тогда я ухожу.
Sparky 20 март 2014, в 23:55
0

см. jsfiddle.net/arunpjohny/DuzTd/2
Arun P Johny 20 март 2014, в 23:55

Показать ещё 11 комментариев

Теги:

jquery

2 ответа

1

Решение для специально описанной проблемы

var fieldset = $('fieldset fieldset');

fieldset.wrapAll('<dl>').find('legend').wrapInner('<dt>').children().unwrap()
fieldset.each(function(){
    $(this).find('p').wrapAll('<dd>');
}).children().unwrap();

Демо на странице http://jsfiddle.net/YD5n5/

Gabriele Petrioli 20 март 2014, в 21:55

Ещё вопросы

какое отношение этот заголовок имеет к этому вопросу?
здесь есть Some long text here... Some long text here... но желаемый результат у вас есть <dd>Some text here</dd>
@ GabyakaG.Petrioli - Извините, заголовок был из предыдущего поста. Меняется сейчас.
Что вы имеете в виду, что у вас есть «редактор HTML» на вашем сайте?
@Sparky - Сложно объяснить, но мои клиенты могут изменять контент через WYSIWYG-редактор.
Вы имеете в виду, что веб-сайт содержит CMS? Если ты не можешь объяснить это ...
@ArunPJohny - Извини, все почистил. Утром пятницы мозги не работают должным образом.
@ Sparky - Не обязательно. Это очень маленькая CMS, которую мы создали.
Так почему бы не исправить причину, вместо того, чтобы поучаствовать в DOM после свершившегося факта?
@ Sparky - Почти невозможно, так как редактор не был создан нами, и потребовались бы дни возни, чтобы найти корень проблемы. Нам нужно применить исправление сейчас, пока мы ищем источник проблемы.

Arun P Johny · Accepted Answer · 2014-03-20T22-57-00.000Z

В качестве идеального решения я бы рекомендовал установить основную причину, то есть редактор.

Если это невозможно, попробуйте

var $items = $('fieldset fieldset').wrap('<dl />').contents().unwrap().parent();
$items.find('legend').wrap('<dt />').contents().unwrap();
$items.each(function () {
    $(this).find('p').wrapAll('<dd />');
})

Демо: скрипка, или скрипка