Can anyone help me please?
The script I did is to transform the curriculum matrix that is in an ul into separate columns, but it is catching the curriculum matrix of other courses. I remember how to separate this by selector, but I can not understand the logic of how to do it inside the loop.
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><scriptsrc="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">×</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">×</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>