Utilizzando .each () per iterare le selezioni per html5 e
Domanda
Saluti tutti,
Ho scritto uno script per creare didascalie all'immagine HTML5 da tag di immagine normali usando <figure>
e <figcaption>
.
Il mio CMS utilizza FCKEditor, che pone sempre immagini incorporate all'interno dei paragrafi. Quindi la mia sceneggiatura crea un file <figcaption>
intorno all'immagine e poi lo sposta fuori dal paragrafo (vedi HTML5, figura/figura all'interno di un paragrafo fornisce un'output imprevedibile)).
La sceneggiatura che ho scritto opere, ma attraversa il DOM due volte perché non sono riuscito a trovare un modo per attraversare il DOM una sola volta. Apprezzerei se qualcuno meglio esperto a jQuery potesse offrire alcuni suggerimenti su come semplificare/migliorare lo script.
Grazie, -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));
});
})
Nessuna soluzione corretta