Динамически добавлять тег <a> во все изображения <img> в определенном разделе

Question

Динамически добавлять тег <a> во все изображения <img> в определенном разделе

0

Я хотел бы динамически добавлять Tag во все Изображения в конкретный div с атрибутом rel-Attribute.

например, мой код в HTML

<div id="content">
  <img src="images/1.jpg"  alt="Pic One" />
  <img src="images/2.jpg"  alt="Pic Two" />
  (...)
</div>

После функции JavaScript это должно быть примерно так:

<div id="content">
  <a href="images/1.jpg" rel="prettyPhoto"><img src="images/1.jpg" alt="Pic One"/></a>
  <a href="images/2.jpg" rel="prettyPhoto"><img src="images/2.jpg" alt="Pic One"/></a>
  (...)
</div>

Есть ли подходящий способ сделать это? Возможно, с регулярным выражением?

Smilla J. 17 апр. 2014, в 12:03

Источник

0

Есть много подходящих способов сделать это, но что вы уже пробовали?
Amit Soni 17 апр. 2014, в 09:14

Теги:

javascript

jquery

html

regex

3 ответа

1

Только JavaScript может это сделать. Сначала выберите все изображения внутри div:

var images=document.getElementById("content").querySelectorAll("img");

Затем вам нужно будет перебирать каждый из них и редактировать его:

for (var I=0; I<images.length; I++){
    images[I].outerHTML="<a href='"+images[I].src+"' rel='prettyPhoto'>"+images[I].outerHTML+"</a>";
}

Это должно сделать это.

Helpful 17 апр. 2014, в 08:05

1

+1 за бесплатный код :)
GôTô 17 апр. 2014, в 09:23
0

Мне нравится писать вещи ванили ...
Helpful 17 апр. 2014, в 09:25
0

Мне нравится ваниль (ням)
GôTô 17 апр. 2014, в 09:34

Показать ещё 1 комментарий

0

$("#content > img").each(function(){
    $(this).wrap("<a>");
});

jancha 17 апр. 2014, в 06:25

Ещё вопросы

Есть много подходящих способов сделать это, но что вы уже пробовали?
Мне нравится писать вещи ванили ...

Milind Anantwar · Accepted Answer · 2014-04-17T07-55-00.000Z

Попробуй это:

 $('#content img').each(function(){
  $(this).wrap('<a href="'+$(this).attr('src')+'" rel="prettyPhoto"></a>');
 });

Рабочая демонстрация

+1 Не знал функции wrap в jQuery, кажется полезным!