Javascript copying content from another DIV that is not for copying

Asked

Viewed 47 times

1

Can someone please help me?

The script I did is to turn the curriculum matrix that is in a ul into separate columns, but it’s picking up the curriculum matrix of other courses. I remember how to separate this by selector, but I can’t understand the logic of how to do inside the loop.

https://codepen.io/priscilacarvalho/pen/bxoYaN

var count = 0;
var perCol = 11;
var $ul = $('.modal-body ul');
var rows = Math.ceil($ul.find('li').length/perCol);
// var clearfix = "<div class='clearfix'></div>";
for(var i=0; i<=rows;i++){

  if(count % 4 == 0){    
    $ul.before("<div class='clearfix'></div>");   
  }
  

  $ul.before('<div class="col-sm-3" data-count='+count+'><ul class="list-unstyled"></ul></div>');   
  
  count +=1;
}

for(var i=0;i<=rows;i++){
  $ul.find('li:lt('+(perCol)+')').appendTo('ul.list-unstyled:eq('+(i)+')');
}

$("ul.list-unstyled:empty").parent().remove();

$ul.remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<a href="" class="circle-modal blue" data-toggle="modal" data-target="#administracao">
  <i>Administração</i>
</a>

<!-- Modal -->
<div class="modal fade" id="administracao" tabindex="-1" role="dialog" aria-labelledby="administracao">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
        <h3 class="modal-title text-center" id="myModalLabel">Administração</h3>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <h4>Perfil Profissional</h4>
            <p class="text-justify">Na UNIFAMMA o estudante de Administração aprenderá que o principal papel do administrador é conceber, planejar e executar estratégias que visam o melhor desempenho da organização em qualquer mercado de atuação. Todas as organizações, com ou sem fins lucrativos, privadas ou públicas, grandes ou pequenas e operando em qualquer setor da economia necessitam de administradores. O curso de Administração da UNIFAMMA busca desenvolver empreendedores e administradores capazes de promoverem o avanço da sociedade, por meio de uma formação voltada para identificação e resolução de problemas, do trabalho em equipe e da criatividade.</p>
          </div>
          <div class="clearfix"></div>
          <hr>
          <div class="col-sm-12">
            <h4>Matriz curricular</h4>            
          </div>
         <ul>
 	<li>Comunicação oral e escrita</li>
 	<li>Contabilidade Geral</li>
 	<li>Filosofia e Ética</li>
 	<li>Matemática Aplicada</li>
 	<li>Metodologia do trabalho Científico</li>
 	<li>Teoria Geral da Administração</li>
 	<li>Economia</li>
 	<li>Matemática Financeira</li>
 	<li>Sociologia</li>
 	<li>Direito Empresarial</li>
 	<li>Psicologia Organizacional</li>
 	<li>Gestão de Custos</li>
 	<li>Teoria das Organizações</li>
 	<li>Estatística</li>
 	<li>Macroeconomia</li>
 	<li>Gestão de Pessoas e Subsistemas de RH</li>
 	<li>Sistemas de Informação</li>
 	<li>Gestão da cadeia de suprimentos</li>
 	<li>Administração de Marketing</li>
 	<li>Antropologia</li>
 	<li>Prática de Gestão de Pessoas e Departamento Pessoal</li>
 	<li>Planejamento Financeiro</li>
 	<li>Pesquisa Operacional</li>
 	<li>Sistemas de produção de bens e serviços</li>
 	<li>Composto de Marketing</li>
 	<li>Administração Pública</li>
 	<li>Administração Financeira</li>
 	<li>Logística</li>
 	<li>Empreendedorismo</li>
 	<li>Administração de Projetos</li>
 	<li>Direito Trabalhista</li>
 	<li>Consultoria Organizacional</li>
 	<li>Estratégia Empresarial</li>
 	<li>Mercados Financeiros</li>
 	<li>Ciência Política</li>
 	<li>Gestão do Agronegócio</li>
 	<li>Gestão da Qualidade</li>
 	<li>Análise de Investimento</li>
 	<li>Varejo</li>
 	<li>Tópicos Especiais I: Produção científica</li>
 	<li>Gestão Ambiental</li>
 	<li>Componente Curricular Optativo</li>
 	<li>Jogos de Empresa</li>
</ul>
        </div>
      </div>
      <div class="modal-footer">

<button type="button" class="btn btn-info text-white" data-dismiss="modal">
<i class="fa fa-graduation-cap"></i>
<span>Inscreva-se</span> 

</button>
      </div>
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<a href="" class="circle-modal blue" data-toggle="modal" data-target="#ArquiteturaeUrbanismo">
  <i>Arquitetura e Urbanismo</i>
</a>

<!-- Modal -->
<div class="modal fade" id="ArquiteturaeUrbanismo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
        <h3 class="modal-title text-center" id="myModalLabel">Arquitetura e Urbanismo</h3>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <h4>Perfil Profissional</h4>
            <p class="text-justify">O curso de Arquitetura e Urbanismo é bastante dinâmico, e na UNIFAMMA o profissional aprenderá a ter senso crítico e estético apurado, sensibilidade criativa aguçada e habilidade técnica desenvolvida para abordar e tratar problemas sociais relacionados à produção do espaço. Na prática o Arquiteto é capaz de exercer uma gama de atividades relativas às áreas de Arquitetura e Urbanismo: desenvolver pesquisas; estabelecer diretrizes; planejar e elaborar projetos com viabilidade técnico-econômica, considerando fatores culturais, estéticos e sociais; absorver novas tecnologias, elaborar soluções alternativas e propor com criatividade novas aplicações considerando aspectos ambientais e humanos, de maneira ética e socialmente responsável.</p>
          </div>
          <div class="clearfix"></div>
          <hr>
          <div class="col-sm-12">
            <h4>Matriz curricular</h4>            
          </div>
          <ul>
 	<li>Geometria Plana e Desenho Geométrico</li>
 	<li>História da Arquitetura: Pré-história, Antiguidade e Idade Média</li>
 	<li>História da Arte: Pré-história, Antiguidade e Idade Média</li>
 	<li>Introdução à Arquitetura e Urbanismo</li>
 	<li>Introdução ao Desenho Arquitetônico</li>
 	<li>Meios de Expressão e Representação</li>
 	<li>Plástica Aplicada</li>
 	<li>Desenho Arquitetônico</li>
 	<li>Geometria Descritiva e Perspectiva</li>
 	<li>História da Arquitetura: Idade Moderna</li>
 	<li>História da Arte: Idade Moderna e Contemporânea</li>
 	<li>Introdução ao Projeto de Arquitetura</li>
 	<li>Metodologia da Pesquisa Científica</li>
 	<li>Modelos e Maquetes</li>
 	<li>Conforto Ambiental: Térmico e Luminoso</li>
 	<li>Desenho Arquitetônico Assistido por Computador: 3D</li>
 	<li>História da Arquitetura: Historicista e Moderna</li>
 	<li>Introdução ao Urbanismo: Teoria e Prática</li>
 	<li>Materiais de Construção</li>
 	<li>Projeto de Arquitetura: Edificações de Pequeno Porte</li>
 	<li>Sociologia</li>
 	<li>Topografia Aplicada</li>
 	<li>Conforto Ambiental: Acústica, Ergonomia e Acessibilidade</li>
 	<li>Desenho Arquitetônico Assistido por Computador: 2D</li>
 	<li>Estudos Ambientais Urbanos</li>
 	<li>Geoprocessamento Aplicado</li>
 	<li>História da Arquitetura: Pós-moderna e Contemporânea</li>
 	<li>Projeto de Arquitetura: Edificações de Funções Simples</li>
 	<li>Projeto de Urbanismo: Loteamento</li>
 	<li>Sistemas Estruturais: Resistência dos Materiais</li>
 	<li>Arquitetura Brasileira: Período Colonial, Neoclassicismo e Ecletismo</li>
 	<li>Instalações Hidráulicas Prediais</li>
 	<li>Introdução ao Paisagismo: Teoria e Prática</li>
 	<li>Mecânica dos Solos e Fundações</li>
 	<li>Projeto de Arquitetura: Edificações de Médio Porte</li>
 	<li>Projeto de Urbanismo: Regularização Fundiária</li>
 	<li>Arquitetura Brasileira: Modernismo, Pós-Modernismo e Contemporaneidade</li>
 	<li>Instalações Elétricas Prediais</li>
 	<li>Planejamento e Projeto da Paisagem</li>
 	<li>Planejamento Urbano e Regional</li>
 	<li>Projeto de Arquitetura: Edificações em Altura</li>
 	<li>Sistemas Estruturais: Concreto Armado</li>
 	<li>Gestão de Projetos</li>
 	<li>Introdução à Arquitetura de Interiores</li>
 	<li>Introdução aos Sistemas Construtivos</li>
 	<li>Projeto de Arquitetura: Edificações de Grande Porte</li>
 	<li>Sistemas Estruturais: Madeira e Aço</li>
 	<li>Técnicas Retrospectivas</li>
 	<li>Componente Curricular Optativo</li>
 	<li>Ética, Legislação e Prática Profissional</li>
 	<li>Gestão de Obras e Serviços</li>
 	<li>Projeto de Arquitetura de Interiores</li>
 	<li>Projeto Executivo e Detalhamento</li>
 	<li>Sistemas Construtivos Racionalizados</li>
 	<li>Estágio Curricular Supervisionado I</li>
 	<li>Trabalho Final de Graduação I</li>
 	<li>Estágio Curricular Supervisionado II</li>
 	<li>Trabalho Final de Graduação II</li>
</ul>
        </div>
      </div>
      <div class="modal-footer">

<button type="button" class="btn btn-info text-white" data-dismiss="modal">
<i class="fa fa-graduation-cap"></i>
<span>Inscreva-se</span> 

</button>
      </div>
    </div>
  </div>
</div>

  • The main problem is that you have var $ul = $('.modal-body ul'); assuming that $ul is a list but actually are several so can not do $ul.find('li') 'cause you’re catching the <li> of all the <ul> the solution is to do with a $ul.each and within that each use each list as $(this). But unfortunately that’s not the whole problem. There are other problems in the division logic in columns that, by the way, is much more complicated than necessary, and ends up dividing it incorrectly despite already dividing.

  • I’m thinking about it too, working with each and this, but the loop for division is really complicated.

  • But you want to split by column quantity or split by items by column ? Both are different and result in different code. Remember that splitting into items per column as the code suggests may not look good if you have too many items. Another question is whether you are using data-count that exists in the code ?

  • The number of columns will depend on the number of items, every 11 items it creates a new column, Count serves to place a div with clearfix every 4 columns

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.