jquery - 使用 .each() 迭代 HTML5 和 的选择

Question

大家好，

我编写了一个脚本，使用 <figure> 从常规图像标签创建 HTML5 图像标题。和<figcaption> .

我的 CMS 使用 FCKEditor，它总是将嵌入图像放置在段落内。所以我的脚本构建了一个 <figcaption>围绕图像，然后将其移到段落之外(请参阅 html5, figure/figcaption inside a paragraph gives unpredictable output ))。

我写的脚本可以工作，但是它遍历了 DOM 两次，因为我无法找到只遍历 DOM 一次的方法。如果更精通 JQuery 的人能够提供一些有关如何简化/改进脚本的建议，我将不胜感激。

谢谢，-北K

// 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));
});
})

Answer 1

当你包装每个元素时，你可以将包装器保存在一个数组中，然后处理该数组，而不是重新遍历 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;
});

Live copy

<小时/>

题外话:您似乎对效率感兴趣，所以我会提到:每次调用 $(this) 都需要多次函数调用和内存分配。不要重复执行此操作，而是在每个循环上执行一次并缓存结果。我在上面的例子中已经这样做了。从性能角度来看，在同一个函数中不断写入 $(this) 并不理想，尽管在 99% 的情况下，这并不重要。如果您要处理很多元素，确实如此。