setTimeout() e insertAfter in uso dinamico

[cleto]

salve.. ho una serie di foto nel documento HTML:

 <figure class="fig_0">               
      <a href="immagini/original/layout_0a.jpg">  
        <img src="immagini/thumbs/layout_0_300.jpg" alt="layout_0">
     </a>    
      </figure>
      
     <figure class="fig_1">               
      <a href="immagini/original/layout_1a.jpg">     
      <img src="immagini/thumbs/layout_1_300.jpg" alt="layout_1">
      </a>
     </figure>  

    <figure class="fig_2">               
      <a href="immagini/original/layout_2a.jpg">     
        <img src="immagini/thumbs/layout_2_300.jpg" alt="layout_2">
      </a>    
     </figure>

dopo 5 secondi che la pagina è caricata vorrei aggiungere nel DOM il tag <figcaption></figcaption> dopo il tag <a></a> a ciascuna immagine cioè:

<figure class="fig_0">               
      <a href="immagini/original/layout_0a.jpg">  
        <img src="immagini/thumbs/layout_0_300.jpg" alt="layout_0">
     </a>    
  <figcaption>Image caption  0</figcaption>
</figure>

ho pensato di usare setTimeout e insertAfter:

 $(document).ready(function(){
	 
  setTimeout(function(){ $('<figcaption>Image caption  0</figcaption>').insertAfter('.fig_0 a');}, 5000);	
    setTimeout(function(){ $('<figcaption>Image caption  1</figcaption>').insertAfter('.fig_1 a');}, 5000);	
	setTimeout(function(){ $('<figcaption>Image caption 2</figcaption>').insertAfter('.fig_2 a');}, 5000);	
   });

ora invece di avere tante espressioni quante sono le immagini come posso scriverla in modo dinamico?

sono partito da due array

  var arr_capt = ['<figcaption>Image caption  0</figcaption>','<figcaption>Image caption  1</figcaption>', '<figcaption>Image caption  2</figcaption>'  ];

    var arr_class = ['.fig_0 a', '.fig_1 a', '.fig_2 a'  ];

ma qui mi sono bloccato

sapete darmi una mano?

grazie

 

[criric]

Ciao, probabilmete hai gia risolto ma ti posto comunque la mia idea

setTimeout(function () {
                $('figure').each(function () {
                    $(this).append('<figcaption></figcaption>');
                });
            },5000);

ho scritto di getto senza testare, è solo un idea

 

[cleto]

Ciao, probabilmete hai gia risolto ma ti posto comunque la mia idea

setTimeout(function () {
                $('figure').each(function () {
                    $(this).append('<figcaption></figcaption>');
                });
            },5000);

ho scritto di getto senza testare, è solo un idea

primo grazie

come poter associare a ciascun <figcaption></figcaption> il suo testo...es..<figcaption>mare</figcaption>...<figcaption>sole</figcaption>...<figcaption>unghia</figcaption>..etc etc.?...per questo avevo pensato ai due array

grazie

 

[criric]

potresti aggiungere un attributo al tag figure nell'html

<figure class="fig_0" data-desc="mare">

e modificare il javascript cosi

setTimeout(function () {
    $('figure').each(function () {
        $(this).append('<figcaption>' + $(this).attr('data-desc') + '</figcaption>');
    });
}, 5000);

 

[cleto]

già...perfetto...danke

alla prossima