Использование JQuery для замены нескольких экземпляров HTML на одной странице

Question

Я создал скрипт, который копирует атрибут alt изображения и помещает его в <span>. Он также формулирует информацию, разделенную дефисом. Он работает как шарм, но только с одним изображением.

Я также хотел бы обернуть <div> вокруг изображения, чтобы избежать ненужной разметки.

Фрагменты скрипта:

HTML:

<div id="hoejre">
    <p>
         <span class="alignright">
             <img src="tommy_stor.jpg" alt="Name - Title" 
                  width="162" height="219" />
             <span></span>
         </span>
   </p>
</div>

JQuery:

var alt = $("#hoejre p span img").attr("alt");
$('#hoejre p span span')
 .html("<strong>" + alt.replace("-", "</strong> <em>") + "</em>");

Выход:

<span class="alignright">
    <img height="219" width="162" alt="Name - Title"                  
         src="tommy_stor.jpg">
        <span>
            <strong>Name</strong><em>Title</em>
        </span>
</span>

Как мне повторить эффект на нескольких изображениях с различной информацией в пределах?

Answer 1

Я бы пошел на что-то вроде ...

$(document).ready(function () {
  $('img.some-class').each(function () {
    var self = $(this);

    self.wrap('<div />').after('<span><strong>' + self.attr('alt').replace('-', '</strong> <em>') + '</em></span');
  });
});

Убедитесь, что вы назначаете общий класс для тех изображений, для которых вы хотите, чтобы это работало, и соответственно изменяете "some-class".

Я не был уверен, какую «ненужную разметку» вы хотели удалить, но приведенный выше код является хорошей отправной точкой.

Answer 2

Вот еще один подход, который предполагает, что все элементы <img> содержатся в одном элементе.

$('#box img').each(
  function(index,element){
    // do your magic here for
  }
)

Функция внутри jQuery.each() была бы такой же, если бы вы использовали этот подход или подход Мэтта. чтобы расширить подход Мэтта к работе с предоставленным вами HTML:

$('span.alignright').each(
  function(index,element){
    var img=$(this).find('img');
    // do your magic here
  }
);

Какой подход вы выберете, зависит от вашей ситуации.