использование .each () для итерации выбора HTML5 <figure>и <figcaption> - PullRequest
Новая
       51

использование .each () для итерации выбора HTML5 <figure>и <figcaption>

3 голосов
/ 26 марта 2011

Приветствую всех,

Я написал скрипт для создания подписей изображений HTML5 из ​​обычных тегов изображений, используя <figure> и <figcaption>.

Моя CMS использует FCKEditor, который всегда размещаетвстроенные изображения внутри абзацев.Поэтому мой сценарий создает <figcaption> вокруг изображения и затем перемещает его за пределы абзаца (см. html5, figure / figcaption внутри абзаца дает непредсказуемый вывод )).

Сценарийнаписал работы, но он дважды проходит через DOM, потому что я не мог найти способ пройти через DOM только один раз.Я был бы признателен, если бы кто-то лучше разбирался в JQuery и мог бы предложить несколько советов о том, как упростить / улучшить скрипт.

Спасибо, -NorthK 

// use like this: 
// <img class="caption" src="http://placehold.it/350x150" alt="Sample image caption" />
//
$(document).ready(function() {
// iterate over each element with img.caption
$('img.caption').each(function() {
    var classList = $(this).attr('class');  // grab the image's list of classes, if any
    $(this).wrap('<figure class="' + classList + '"></figure>'); // wrap the <img> with <figure> and add the saved classes
    $(this).after('<figcaption>' + $(this).attr('alt') + '</figcaption>'); // add the caption
    $(this).removeAttr('class'); // remove the classes from the original <img> element
});

// now iterate over each figure.caption we built, and relocate it to before its closest preceding paragraph
$('figure.caption').each(function() {
    $(this).parent('p').before($(this));
});
})

Ответы [ 2 ]

5 голосов
/ 26 марта 2011

Оборачивая каждый элемент, вы можете сохранить оболочку в массиве, а затем обработать массив, а не пересматривать DOM: 

$(document).ready(function() {
    var wrappers = [];

    // iterate over each element with img.caption
    $('img.caption').each(function() {
        var $this = $(this);
        var classList = this.className;  // grab the image's list of classes, if any
        $this.wrap('<figure class="' + classList + '"></figure>'); // wrap the <img> with <figure> and add the saved classes

        // Remember the wrapper here:
        wrappers.add($this.parent());

        $this.after('<figcaption>' + $(this).attr('alt') + '</figcaption>'); // add the caption
        $this.removeAttr('class'); // remove the classes from the original <img> element
    });

    // now iterate over each figure.caption we built, and relocate it to before its closest preceding paragraph
    $.each(wrappers, function(index, item) {
        $(item).parent('p').before(item);
    });

    // And if you're done with it, release it:
    wrappers = null;
});

Вот упрощенный пример:

HTML: 

<p><img class='caption' src='http://www.gravatar.com/avatar/6d8ebb117e8d83d74ea95fbdd0f87e13?s=48&d=identicon&r=PG'></p>
<p><img class='caption' src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=48&d=identicon&r=PG'</p>

JavaScript: 

jQuery(function($) {

  var wrappers = [];
  $("img.caption").each(function() {
    var $this = $(this);
    $this.wrap("<figure class='" + this.className + "'>");
    wrappers.push($this.parent('figure'));
  });
  $.each(wrappers, function(index, item) {
    $(item).addClass("foo");
  });
  wrappers = null;
});

Живая копия

Не по теме: Выпохоже, интересует эффективность, поэтому я упомяну: каждый вызов $(this) требует нескольких вызовов функций и выделения памяти.Вместо того, чтобы делать это несколько раз, сделайте это один раз в каждом цикле и кешируйте результат.Я сделал это в приведенном выше примере.Постоянное написание $(this) в одной и той же функции не является идеальным с точки зрения производительности, хотя в 99% случаев это не имеет значения.Если вы имеете дело с лотом элементов, это так.

0 голосов
/ 26 марта 2011

Вы можете использовать метод unwrap, чтобы избавиться от <p> в первой итерации.Вы также можете использовать цепочку для упрощения синтаксиса. 

$('.caption').each(function() {
    $(this)
        .unwrap() // ditch the conflicting pararaph parent wrapper
        .wrap('<figure class="' + $(this).attr('class') + '" />') // wrap the figure tag instead, jQuery can handle a self closing tag
        .after('<figcaption>' + $(this).attr('alt') + '</figcaption>') // add the caption
        .removeAttr('class'); // remove the classes from the original <img> element
});

http://jsfiddle.net/pxfunc/AGgL2/

...