How to check the ID value of a tag and how often does it repeat with Jquery?

Navigation
2

Personal I have an excerpt of a code referring to the image below

Thefirstdivshowsalistofstudents.Inthesecondthestudentsthattheuserchooseforhisgroup,asheclicksontopofeachstudentIhaveajqueryfunctionthatinsertsthestudentintothedivgroupandlimitshimtoinsertatmost5(outsidetheuserhimself)andtheinverseprocessforremovestudentsfromthegroup,witheachclickthesendbacktodivstudents.Ineedtoapplyabusinessrulewheretheusermustchoosetwostudentsfromeachcourse,soIthoughtIwouldputtheIDofeachcourseintheIDofli,butIdonotknowhowtoreadthoseidsandonlyallowtwostudentsfromeachcourseinyourgroup.

Itriedtouse.lengthwithaifsoonafteritchecksthemaximumamounttomakethecomparisons,butitdidnotroll.ideasorexamplestohelpplease?

CodeJQUERY:

$(function(){$(".aluno").click(function(){ //EVENTO CLICK

    var c = 1; //CONTADOR
    $("#grupo .aluno").each(function(){
      c++;
    });

    if(($(this).parent().attr("id") == "lista") && c <=  5) { //VERIFICA EM QUAL DIV PERTENCE E QUANT. MÁXIMA
       $("#grupo").append(this); //ANEXA NA DIV GRUPO
       $("#grupo .aluno").addClass("selecionado"); //INSERIR CLASSE COM A COR DIFERENTE

    } else {
       $("#lista").append(this); //ANEXA NA DIV ALUNOS
       $("#lista .aluno").removeClass("selecionado"); //REMOVER CLASSE
    }

  });
});

HTML: 

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="style.css">

 <div class="lista-alunos">
    <h3></i>Alunos</h3>
    <ol id="lista">
      <li class="aluno" id="1">Gabriel | ENG.</li>
      <li class="aluno" id="1">Rafael | ENG.</li>
      <li class="aluno" id="1">Samuel | ENG.</li>
      <li class="aluno" id="1">Alex | ENG.</li>
      <li class="aluno" id="1">Ricardo | ENG.</li>
      <li class="aluno" id="2">Felipe | ADS.</li>
      <li class="aluno" id="2">Cesar | ADS.</li>
      <li class="aluno" id="2">Pedro | ADS.</li>
      <li class="aluno" id="2">Maria | ADS.</li>
      <li class="aluno" id="2">Ana | ADS.</li>
      <li class="aluno" id="3">Lucas | ARQ.</li>
      <li class="aluno" id="3">Miguel | ARQ.</li>
      <li class="aluno" id="3">David | ARQ.</li>
      <li class="aluno" id="3">Julia | ARQ.</li>
      <li class="aluno" id="3">Alice | ARQ.</li>
    </ol>
</div>

<div class="lista-grupo">
  <h3>Grupo</h3>
       <ol id="grupo">
            <li class="lider" id="1">Eu | ENG.</li>
      </ol>
</div>

CSS: 

      .lista-alunos, .lista-grupo{
        position: relative;
        float: left;
        display: block;
        width: 270px;
        height: 270px;
        padding: 10px;
        margin-right: 10px;
        border: 1px solid #ccc;
        background-color: #F7F7F7;
      }
      #lista{
        overflow-y: scroll;
        height: 205px;
      }
      #lista, #grupo{
        padding-left: 20px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .aluno, .lider{
        margin: 3px;
        padding: 4px;
        cursor: pointer;
      }
      .aluno{
        background: #CACACA; 
      }
      .selecionado, .lider{
        background: #A1B3A1;
      }
    
asked by anonymous 13.04.2016 / 19:39

3 answers

4

In each document (ie in each "HTML page") the IDs must be unique. This is the fundamental difference between ID and class. ID is unique and class is to apply to element groups.

If this id is related, for example, to something that comes from the database you can save this information in the element in a data- field. Thus the element has the information that you want and you can in the same group them. A class would also work, depending on what you need, and provided you can group.

If you use data-id you can do this in jQuery / JavaScript: 

$(function() {
    $(".aluno").click(function() { //EVENTO CLICK
        var aluno = this;
        var campo = aluno.parentElement.id == 'lista' ? '#grupo' : '#lista';
        var alunosGrupo = $("#grupo li"); // se o lider não contar podes usar "#grupo .aluno"

        if (aluno.parentElement.id == 'lista') {
            var duplos = alunosGrupo.get().filter(function(el) {
                return aluno.dataset.id == el.dataset.id;
            });
            if (duplos.length > 1) return;
        }
        if (alunosGrupo.length <= 5) $(campo).append(aluno); //ANEXA NA DIV GRUPO
        else return;

        aluno.classList.toggle('selecionado');
    });
});

jsFiddle: link

    
13.04.2016 / 20:16
1

The first error in your html, is that your id is repeated, remember that the id is used to identify the HTML element, not the course.

If you need to add values for your business in HTML, use data-custom properties, such as data-curso='1' or data-aluno='33'

Once this is done, you can count the number of students in div#grupos who are in the same course, and not move the student to the group if they satisfy the condition.

In the example below I'm assuming that the logged in student has data-aluno='0' , but you can create a new property like data-self='true'

The rest of the logic, is to move the student to their old position in the other list (I'm sorting by id of aluno ) 

var alunos = document.querySelector("#alunos .content");
var grupos = document.querySelector("#grupos .content");

var pessoas = document.querySelectorAll(".content div[data-aluno]");
var moverPessoa = function (atual, destino, id) {
  var irmaos = destino.querySelectorAll("div[data-aluno]");
  irmaos = [].filter.call(irmaos, function (aluno, indice) {    
    return parseInt(atual.dataset.aluno) < parseInt(aluno.dataset.aluno);
  });
  
  if (irmaos.length == 0) {    
    destino.appendChild(atual);
  } else {    
    destino.insertBefore(atual, irmaos[0]);
  }
}

var onPessoaClick = function (event) {
  var atual = event.target;
  var id = parseInt(atual.dataset.aluno);
  var origem = atual.parentElement;
  var destino = origem == alunos ? grupos : alunos;
  
  if (id == 0) {
    alert('Não é possivel remover a si mesmo do Grupo');
    return;
  }
  
  if (origem == alunos) {
    var pessoas = destino.querySelectorAll("div[data-aluno]");
    var mesmoCurso = [].filter.call(pessoas, function (aluno, indice) {    
      return atual.dataset.curso == aluno.dataset.curso;
    });
    if (mesmoCurso.length == 2) {
      alert('Não é possivel mover mais alunos deste curso para o grupo');
      return;
    }
  }
    
  moverPessoa(atual, destino, id);
};

[].forEach.call(pessoas, function (pessoa, indice) {
  pessoa.addEventListener("click", onPessoaClick);
});
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: whitesmoke;
}

.container {
  position: absolute;
  margin: 10px;
  width: calc(50% - 20px);
  height: calc(100% - 20px);
  background-color: white;
  box-shadow: 0px 0px 10px black;
  border-radius: 5px;
  overflow: auto;
}

#alunos {
  left: 0px;
}

#grupos {
  right: 0px;
}

.container header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font: bold 30px Cambria;
  background-color: gainsboro;  
}

.container .content {
  position: absolute;
  width: 100%;
  top: 40px;
  bottom: 0px;
  overflow: auto;
}

.container .content div {
  width: 100%;
  height: 40px;
  line-height: 20px;
  font: normal 20px Calibri;
  padding: 10px;
  border-bottom: 1px solid gainsboro;
  box-sizing: border-box;
  cursor: pointer;
}
<section id="alunos" class="container">
  <header>Alunos</header>
  <div class="content">
    <div data-aluno="1" data-curso="1">Gabriel | ENG.</div>
    <div data-aluno="2" data-curso="1">Rafael | ENG.</div>
    <div data-aluno="3" data-curso="1">Samuel | ENG.</div>
    <div data-aluno="4" data-curso="1">Alex | ENG.</div>
    <div data-aluno="5" data-curso="1">Ricardo | ENG.</div>
    <div data-aluno="6" data-curso="2">Felipe | ADS.</div>
    <div data-aluno="7" data-curso="2">Cesar | ADS.</div>
    <div data-aluno="8" data-curso="2">Pedro | ADS.</div>
    <div data-aluno="9" data-curso="2">Maria | ADS.</div>
    <div data-aluno="10" data-curso="2">Ana | ADS.</div>
    <div data-aluno="11" data-curso="3">Lucas | ARQ.</div>
    <div data-aluno="12" data-curso="3">Miguel | ARQ.</div>
    <div data-aluno="13" data-curso="3">David | ARQ.</div>
    <div data-aluno="14" data-curso="3">Julia | ARQ.</div>
    <div data-aluno="15" data-curso="3">Alice | ARQ.</div>
  </div>
</section>

<div id="grupos" class="container">
  <header>Grupo</header>
  <div class="content">
    <div  data-aluno="0" data-curso="1">Eu | ENG.</div>
  </div>
</div>
    
13.04.2016 / 20:49
0

create a variable and put li in there with 

var li = document.getElementById("id_da_li");

Then do 

li.getAttribute("id");

there you make a if saying that if id is equal to 1 adds in array with method .push(li); and adds in div so you count how many elements are in the array and makes another if saying that if you have more than two elements you can not add any more

    
13.04.2016 / 20:33
Query specified join fetching, but the owner of the fetched association was not present in the select list How to get the GET value in Laravel, even when the request method is POST?