Как добавить обертывающие теги с помощью JS?

Question

[Владимир Новицкий]

Здравствуйте.
У меня два похожих вопроса.
Суть в следующем. Идет обычная HTML-разметка:

<p>Какой-то абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>
<p>Еще один абзац.</p>

Если вдруг у двух соседних абзацев появляются определенные атрибуты, то надо эти абзацы заключить в контейнер с классом:

<p>Какой-то абзац.</p>
<div class="container">
    <p one>Второй абзац.</p>
    <p two>Третий абзац.</p>
</div>
<p>Еще один абзац.</p>

Поскольку, после элемента с атрибутом one всегда должен идти элемент с атрибутом two, то можно делать проверку только по первому атрибуту и оборачивать вместе с элементом, непосредственно идущим за ним.

Вопрос второй похож на первый в плане того, что тоже надо добавлять обертывающие элементы, но проверка происходит по другому принципу. Например, есть картинка:
<img src="picture.jpg" alt="">
Если вдруг обнаруживается, какой-либо текст в атрибуте alt, то автоматически добавляется целая обертывающая конструкция. А также, само значение атрибута alt добавляется в эту конструкцию:

<figure class="pic">
    <img src="picture.jpg" alt="Автор картинки И. Иванов">
    <figcaption>
        <p>Автор картинки И. Иванов</p>
    </figcaption>
</figure>

Вот такие два вопроса. Очень прошу помощи.
Заранее спасибо.

P. S. Предвидя вопросы по поводу несуществующих атрибутов, сразу скажу — это сделано для удобства. Не знаю, как в JS, но в CSS спокойно воспринимаются любые названия. Например:

[one] {
    color:red;
    }

P. P. S. Первый вопрос решен. Решение:

$('[one], [two]').wrapAll('<div class="container" />');

Всем спасибо за подсказки.

Второй вопрос решен. Решение:

$('img').each(function() {
    var img = $(this);
    var alt = img.attr('alt');
    if(alt) {
        img.wrap('<figure class="pic">');
        img.after('<figcaption><p>'+alt+'</p></figcaption>');
    }
});

Спасибо Андрей Гуртовой

Answer 1

[Андрей Гуртовой]

получите, распешитесь
jsbin.com/xuvoma/2/edit?html,js,output

Comments

[Владимир Новицкий]

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

[Андрей Гуртовой]

Владимир Новицкий: моё решение с .next() сделано так только потому, что так стояла задача

[Владимир Новицкий]

Да, я понял. Спасибо.

Answer 2

[Сергей Иванов]

jquery

Comments

[Владимир Новицкий]

Спасибо.
Но там проверка по классу, а мне надо именно по атрибуту. И, чтобы подтягивался в тот же контейнер следующий за проверяемым элемент.

[Владимир Новицкий]

А можно ли сделать так:

$( ".inner1" ).wrap( "<div class='new'>" );
$( ".inner2" ).wrap( "</div>" );

[Владимир Новицкий]

Нет, проверил — так не получается. Надо, как-то по-другому. И вопрос про атрибуты вместо классов тоже остается.

[Владимир Новицкий]

С объединением двух разных элементов по классу разобрался:

$( ".one, .two" ).wrapAll( "<div class='container' />");

Остается вопрос, как сделать, чтобы реагировало не на класс <p class="one">, а на атрибут <p one>?

[DevMan]

Владимир Новицкий: ответил ниже.

[Владимир Новицкий]

DevMan: Где? Там ответил KorsaR-ZN

[DevMan]

Владимир Новицкий: какой-то глюк, сейчас добавлю

[Сергей Иванов]

Владимир Новицкий: api.jquery.com/jquery.each ну вкупе с этим надо.
Будет что-то в этом стиле
$.each( $('.class').find('li') , function(){ if($(this).hasClass('one')){...} } )

[Сергей Иванов]

Владимир Новицкий: $('img[alt]').wrap('div').parent().wrap('div')

[Владимир Новицкий]

Writerim: Немного не то.

Answer 3

[KorsaR-ZN]

Самый простой вариант, это jQuery selectors

$('[one] + [two]').wrap('<div class"container"></div>')

И так далее для остальных.

Comments

[Владимир Новицкий]

Соблазнительная, по своей простоте, конструкция, но почему-то не работает: codepen.io/Novitsky/pen/zxEExB (если бы работало, то фон обоих абзацев был бы серым).

[Владимир Новицкий]

А, всё. Решил:

$('[one], [two]').wrapAll('<div class="container" />');

[Владимир Новицкий]

Остается вопрос с картинкой и ее альтом.