jQuery DOM Building Indentation

Question

C'est ma 2ème journée d'apprentissage de jQuery et je l'aime jusqu'à présent (ça me fait penser à LISP) mais j'ai une question sur une façon de formater quelque chose (ou éventuellement utiliser une fonction que je ne connais pas). J'ai un tableau d'objets appelés MYDOCUMENTS et je suis en train de construire une table en utilisant le code suivant:

jQ('<table/>').addClass('grid').attr('id', 'myDocumentTable') 
    .append(jQ('<thead/>') 
     .append(createHeaderRow(['Title', 'File', 'Updated By', 'Updated On']))) 
    .append(jQ('<tbody/>') 
     .append(jQ.map(myDocuments, function(myDocument){ 
      return jQ('<tr/>') 
       .on({ 
        mouseover: function(){jQ(this).addClass('rowHighlight');}, 
        mouseout: function(){jQ(this).removeClass('rowHighlight');} 
       .append(jQ('<td/>').text(myDocument.title)) 
       .append(jQ('<td/>') 
        .append(jQ('<a/>').addClass('file-download').attr('href', "fileOpener?id="+myDocument.fileId).text(myDocument.fileName))) 
       .append(jQ('<td/>').text(myDocument.userName)) 
       .append(jQ('<td/>').text(myDocument.updatedOn)) 
       [0]; 
    }))) 

je vraiment ike le fait que si vous regardez l'empreinte, il imite parfaitement le code HTML qui le rend très facile à lire.

<table> 
    <thead> 
     <th></th> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <a /> 
      </td> 
     </tr> 
    <tbody> 
</table> 

Maintenant, disons que je veux construire une structure comme le

<div id='myDocumentDiv' 
    <h3>docTitle1</h3> 
    <div>docInfo1</div> 
    <h3>docTitle2</h3> 
    <div>docInfo2</div> 
    <h3>docTitle3</h3> 
    <div>docInfo3</div> 
</div> 

Chacun des MYDOCUMENTS suivantes va maintenant créer un <h3> et un <div> (au lieu d'un élément de flambage <tr>). Je ne peux pas trouver un bon moyen d'écrire le code afin qu'il corresponde à l'indentation HTML sans rendre le javascript plus difficile à lire. À l'origine, je suis tombé sur ce problème car je voulais voir à quoi ressemblerait un accordéon jQuery.ui. Je me rends compte que je pourrais envelopper le <h3> et <div> dans un <div> externe et utiliser l'attribut :header d'accordéon mais je suis curieux de savoir quelles réponses les gens viennent quand même.

Answer 1

Que pensez-vous de cela?

var $element = $('<div/>'); 
for(var x = 0; x < 3; x++){ 

    var $header = $('<h3/>'); 
    $header.html('My header ' + x); 

    var $body = $('<div/>'); 
    $body.html('My Body ' + x); 

    $element.append($header); 
    $element.append($body); 

} 

J'utilise le $ au nom de la variable pour indiquer que ce n'est pas un élément DOM, mais un élément DOM enveloppé dans un objet de requête.

Donc, si je devais obtenir l'élément brut:

var dom_element = $element[0]; 

Je ne voudrais pas utiliser le préfixe $.

espoir qui aide ...

Answer 2

L'exemple se trouve here.

Vous pouvez utiliser html de jquery pour créer un ensemble d'éléments html à la fois. Pour préserver l'indentation, utilisez l'opérateur de chaîne + pour chaque ligne du code html.

$('<div id="myDocumentDiv"' + 
     '<h3>docTitle1</h3>' + 
     '<div>docInfo1</div>' + 
     '<h3>docTitle2</h3>' + 
     '<div>docInfo2</div>' + 
     '<h3>docTitle3</h3>' + 
     '<div>docInfo3</div>' + 
    '</div>') 
.appendTo('#container');