Novitsky
@Novitsky
Веб-разработчик, дизайнер, фотограф

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

Здравствуйте.
У меня два похожих вопроса.
Суть в следующем. Идет обычная 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>');
    }
});

Спасибо Андрей Гуртовой
  • Вопрос задан
  • 2581 просмотр
Решения вопроса 1
jt3k
@jt3k
Фронтендер, люблю работать и получать удовольствия
Пригласить эксперта
Ответы на вопрос 2
Writerim
@Writerim
Заполнить позже...
KorsaR-ZN
@KorsaR-ZN
Самый простой вариант, это jQuery selectors
$('[one] + [two]').wrap('<div class"container"></div>')


И так далее для остальных.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы