Cómo hacer código HTML (divs) + jQuery en solo jQuery que genera el HTML

Tengo algo de HTML en una página que uso jQuery para modificar/agregar datos desde una matriz. Me gustaría usar jQuery para generar HTML/Divs & img src si es posible para dejar de tener que editar manualmente cada página con la cantidad de divs requeridos en HTML. No tengo acceso a una base de datos para esto.

El marcado HTML se ve así, que tengo que copiar y pegar para la cantidad de elementos en la matriz:

<!-- START ITEM --><div class="itemWrapper"><a href="" class="itemLink">
<!-- IMG  --><img src="" class="itemImage"></a>
<!-- TITLE --><div class="itemTitle">T</div>
<!-- INFO --><div class="itemDesc"></div></div>
<!-- END ITEM -->

Y jQuery está en document.ready:

var infoArray = [
      'ABC12_square','Square','Square Description Here',
      'ABC13_polygon','Polygon','Polygon Description Here',
      'ABC14_triangle','Triangle','Triangle Description Here',
    ];
      $BoP = 'tag+info+here';
    
      i0 = 0;
      i1 = 1;
      i2 = 2;
      
    $('.itemImage').each(function(index) {
      $(this).attr("src", infoArray[i0]);
      i0 = i0+3;
      var prR = $(this).attr("src");
      var subprR = jQuery.trim(prR).substring(0, 5);
      $(this).attr("src", "/images/info/"+prR+"_M.jpg");
      $(this).parent().attr("href", "/iteminfopopup.htm?codes="+prR+"&BoP="+$BoP).attr('rel', 'mygroup').addClass('BoP8 fancybox.iframe');
      $(this).parent().append('<img src="/images/info/'+subprR+'_H.jpg" class="itemHover" border="0" width="250" height="354">');
    });
       
    $(".itemTitle").each(function(index) {
      $(this).text(infoArray[i1]);
      i1 = i1+3;
    });
    
    $(".itemDesc").each(function(index) {
      $(this).text(infoArray[i2]);
      i2 = i2+3;
    });
    // Setup Fancybox
  $(".BoP8").fancybox({
      closeBtn    : true,
      maxWidth  : 467,
      maxHeight  : 609,
      fitToView  : false,
      padding   : '5',
      openEffect  : 'none',
      loop: false,
      closeEffect  : 'none',
      nextEffect : 'none',
      prevEffect : 'none'
  });
    // Create image hover animation
  $(".itemImage").hover(
     function() {$(this).animate({"opacity": "0"}, "fast");},
     function() {$(this).animate({"opacity": "1"}, "fast");}
   );

Violín: http://jsfiddle.net/ZuPnp/

¡He mirado append pero sigue yendo terriblemente mal!

preguntado el 21 de mayo de 12 a las 12:05

2 Respuestas

Eche un vistazo a la función Clonar dentro de jQuery. Eso es probablemente lo que estás buscando. Puede encontrar más información aquí:

http://api.jquery.com/clone/

aquí hay un ejemplo de cómo podrías usar esto:

<div id="holder">
<div class="itemWrapper"><a href="" class="itemLink">
<img src="" class="itemImage"></a>
<div class="itemTitle">T</div>
<div class="itemDesc"></div></div>
</div>

<script type="text/javascript">
    var infoArray = [
          'ABC12_square','Square','Square Description Here',
          'ABC13_polygon','Polygon','Polygon Description Here',
          'ABC14_triangle','Triangle','Triangle Description Here',
        ];

$.each(infoArray, function(index, val){
    //Dont forget to set the new values offcourse.
    $("div.itemWrapper").clone().appendTo("div#holder");
});
</script>

contestado el 21 de mayo de 12 a las 12:05

¿Puedes dar un ejemplo jsfiddle :) - Código espía

En el violín, crea una gran cantidad de divs clonados (50+), cuando dice establecer los valores, ¿como en la longitud de la matriz? - JayDee

Sí, ¿cómo limitar el número de clones? - Código espía

"si desea mostrarlo por un número fijo, puede usar for loop" - rober angelier

Quiero repetirlo a lo largo de la matriz, pero no puedo descifrar esa parte... - JayDee

Mejor uso .prependTo() con .clone()

See example http://jsfiddle.net/ipsjolly/fSAHp/

Si desea mostrarlo por un número fijo, puede usar for loop

contestado el 21 de mayo de 12 a las 13:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.