Montando div dinamico com jQuery

[Thiago - Bulfaitelo 6]

Olá amigos, estou batendo bastante cabeça aqui pra montar esse div do meu projeto da faculdade, vamos lá:

 

hoje eu tenho essa div montada em HTML:

<div class="col-lg-10 text-questionario">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="item-questionario" >31</span>  
                        <button type="button" class="btn btn-info btn-lg header-button">Esconder</button>
						<a class="fancybox fancybox.ajax" href="ajax.php?id=20">
                        	<button type="button" class="btn btn-default btn-lg header-button">Dicas</button>
                        </a>                        
                        
                    </h3>
                    <hr>
                </div>
                <div class="panel-body">
                    <div class="div-questao">                    	
                        <p>No programa do balé Parade, apresentado em 18 de maio de 1917, foi empregada publicamente, pela primeira vez, a palavra sur-realisme. Pablo Picasso desenhou o colagem de ações isoladas seguindo um estímulo musical.</p>                                              
                    </div>
                    <hr>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>A) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>A) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>B) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>B) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>D) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>E) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit animi esse at ullam voluptates qui accusamus corporis quis perferendis, explicabo, ad quod impedit unde aliquid dolore rerum sapiente suscipit.
                        </label>
                    </div>
                    
                </div>
                <hr>
            </div>
        </div >

Estou tentando melhorar ela e monta-la utilizando jQuery pra poder reduzir o trafego entre o servidor e tornar a aplicação mais maleável pois utilizarem Ajax para tal, mas isso já a segunda parte).

 

O meu foto é quero criar uma função a qual eu passe um vetor de dados e ela em sí venha montar a div em questão com os dados estruturados. Porem como já disse estou batendo legal cabeça com isso. o que progredi até agora foi isso:

    <script type="text/javascript">
    	$('<div/>', {
		    id: 'q_div-',
		    class: 'col-lg-10 text-questionario'
		}).appendTo( "#main-container" );
    	$('<div/>', {
		    id: 'q_div-painel',
		    class: 'painel'	   
		}).appendTo( "#q_div-" );
		$('<div/>', {		    
		    class: 'painel-heading'	   
		}).appendTo( "#q_div-painel" );
		$('<h3/>', {		    
		    class: 'panel-title'	   
		}).appendTo( ".painel-heading" );

		$('<span/>', {		    
		    class: 'item-questionario',
		    text: '33'	   
		}).appendTo( ".painel-title" );		
		$('<hr/>').appendTo( ".painel-heading" );

		jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('.painel-heading');

    </script>

Porem estou achando com uma enorme cara de Gambiarra.

 

então, Alguém poderia me ajudar nessa?

[Lucas Guima 164]

Funciona? Depois você refatora.

[Thiago - Bulfaitelo 6]

Funciona? Depois você refatora.

 

Rapaz até então está funcionando mas está com uma enorme cara de ser Gambiarra. :/ porque tenho que montar todo aquele HTML, realmente essa é a melhor e mais otimizada forma ?

[Lucas Guima 164]

[...] realmente essa é a melhor e mais otimizada forma ?

 

Eu nunca disse que é. Mas se funciona, não perca tempo tentando imaginar o que será que pode ser melhorado.

 

Refatoração espontânea só faz quem já conhece uma maneira melhor, não quem vai descobrir para poder implementar.

[Thiago - Bulfaitelo 6]

 

Eu nunca disse que é. Mas se funciona, não perca tempo tentando imaginar o que será que pode ser melhorado.

 

Refatoração espontânea só faz quem já conhece uma maneira melhor, não quem vai descobrir para poder implementar.

 

Eu entendo e concordo plenamente, eu estou progredindo com a função mas empaquei no seguinte problema:

hoje eu to montando uma função que toda vez que ela for chamada eu quero que ela insira uma div, chamando ela novamente eu insiro outra div a baixo e assim vai, até ai estou progredindo e finalmente entendendo, porem empaquei com o seguinte problema, quando chamo a função pela segunda vez uma das div internas está sendo inserida dentro de todas, olha o atual código:

	function createDivToQuest(valuesQuest) {

	// text-questionario, panel
	$('<div>',{
		class 		: 'col-lg-10 text-questionario',
		append : $('<div>',{
						class	: 'panel' 
		}),
		appendTo	: '.j_container'
	});
	// panel-heading
	$('<div>', {
		class		: 'panel-heading',
		text 		: 'painel', // apagar
		appendTo 	: '.panel'
	});	

Repare a segunda inserção de div a qual vai ser inserida dentro da classe panel toda vez que chamo essa função ela insere esse dados em todas as classes com panel e eu queria saber um jeito de não ocorrer isso;

 

tive a seguinte ideia, uma meio de verificar se a div da classe panel ja existe a div com a classe panel headimg porem eu não sei como realizar essa verificação ou o que procurar para estudar isso.

[Thiago - Bulfaitelo 6]

Finalmente terminei essa parte de criação de forma provavelmente usável.

 

Para uso e consulta futura segue o código:

function createDivToQuest(obQuestionario) {

		// text-questionario, panel
		$('<div>',{
			class 		: 'col-lg-10 text-questionario',
			append : $('<div>',{
							class	:   'panel',
							append  : 	$('<div>', {
											class : 'panel-heading'
										})
			}),		
			appendTo	: '.j_container',		
		});
		// panel-title
		$('<h3>', {
			class		: 'panel-title',
			append 		: [
								$('<span>', {
									class	: 'item-questionario',
									text 	: obQuestionario.numPergunta
								}),
								$('<button>', {
									type	: 'button',
									class	: 'btn btn-info btn-lg header-button',
									text 	: 'Esconder'
								}),
								$('<a>', {
									class	: 'fancybox fancybox.ajax',
									href	: 'ajax.php?id='+ obQuestionario.idPergunta,
									append  : $('<button>', {
													type	: 'button',
													class	: 'btn btn-default btn-lg header-button',
													text 	: 'Dicas'
											  })
								})						
						  ],					  
			appendTo	: $('.panel-heading').last()
		});	
		$('<hr/>', {appendTo : $('.panel-heading').last()});
		//  panel-body
		$('<div>', {
			class		: 'panel-body',
			append 		: $('<div>', {
								class	: 'div-questao',
								html 	: obQuestionario.textPergunta
						  }),
			appendTo	: $('.panel').last()
		});
		$('<hr/>', {appendTo : $('.div-questao').last()});

		// console.log(obQuestionario.opcoesPergunta);
		// Percorrenco as opções de pergunta.
		var selected = null;
		$.each(obQuestionario.opcoesPergunta, function(index, value){
			if(index == obQuestionario.opcaoSelecionadaPergunta){
				checked  = 'checked : "checked"';
			}else{
				checked = null;
			}
			// radio div-radio-questao
			$('<div>', {
				class		: 'radio div-radio-questao',
				append 		: $('<label>', {
									append 	: [
													$('<input>', {
														type	: 'radio',
														name	: 'optionsRadios['+ obQuestionario.idPergunta+']',
														value 	: index,
														checked
													}),
													$('<b>', {
														text 	: index+') '
													}),											
													value,											
											  ]							
							  }),		
				appendTo	: $('.panel-body').last()
			});

		});	
	} // Fim função createDiv...