1

Alguém pode me ajudar por favor?

O script que fiz é para transformar a matriz curricular que está em um ul em colunas separadas, mas ele está pegando a matriz curricular de outros cursos. Lembro que a como separar isso por seletor, mas não consigo entender a lógica de como fazer dentro do 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>

4
  • O problema principal é que você tem var $ul = $('.modal-body ul'); assumindo que $ul é uma lista mas na verdade são varias logo não pode fazer $ul.find('li') pois está a apanhar os <li> de todos os <ul> a solução é fazer com um $ul.each e dentro desse each utilizar cada lista como $(this). Mas infelizmente isso não é o problema todo. Tem outros problemas na logica de divisão em colunas que por sinal está bem mais complicada que o necessário, e acaba por lhe dividir incorretamente apesar de já dividir.
    – Isac
    12/09/2018 às 14:44
  • estou pensando nisso também, em trabalhar com o each e o this, mas o loop para a divisão é complicado mesmo. 12/09/2018 às 14:46
  • Mas você quer dividir por quantidade de colunas ou dividir consoante items por coluna ? Ambas são diferentes e resultam em codigo diferente. Lembrando que dividir em items por coluna como o código sugere pode nao ficar bem se tiver demasiados elementos. Outra questão é se está a utilizar o data-count que existe no código ?
    – Isac
    12/09/2018 às 14:58
  • A quantidade de colunas dependerá da quantidade de itens, a cada 11 itens ele cria uma nova coluna, o count serve para colocar uma div com clearfix a cada 4 colunas 12/09/2018 às 16:12

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .