if / else does not work for me

Question

if / else does not work for me

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

-2

Create a small script that runs around div , check if they share one of the # id that is in the # array and if so, add a div inside.

I want to make that if you do not follow the rule the div disappears but if I use else{ $(this).remove()} it erases all div .

When I use else{ $(this).addClass() applies the class to those who meet the 1 condition, not those who do not comply. Do you know why it can be?

var arreglo = ["A", "B", "c", "d","E","f","g","H"];
$(".sup > div").each(function(index){
    console.log("comprobación "+index)
   for(i=0; i< arreglo.length; i++ ){
      var id_ = $(this).attr("id") //obtiene la #id del div
      if(arreglo[i] === id_){//compara las #id si son iguales 
        console.log(arreglo[i]+" = "+id_+"        BINGO")//lo declara en la consola
        $(this).append("<div class='prueba'/>");//dibuja un div dentro
      } else if(arreglo[i] !== id_){
        console.log(arreglo[i]+" = "+id_+" NO")
        $(this).toggleClass("class")
      }
   }//for2
}/*function*/)

JsFiddle

javascript jquery

asked by Iván Quiñones Werth 04.05.2016 в 18:22

source

3 answers

collection repeat, filter by variables Clear form without sending it [closed]

score 1 · Answer 1

You can simplify the code a lot. To check if an id exists in the array you can use the some method of the Array object. From there, if there is you add the div and if you do not add the class to hide it:

var arreglo = ["A", "B", "c", "d","E","f","g","H"];
$(".sup > div").each(function(index){
  var $div = $(this);
  var id_ = $div.attr("id") //obtiene la #id del div
  if (arreglo.some(function(element) { return element===id_; })){
    $div.append("<div class='prueba' />");
  }
  else{
    $div.addClass("oculto");
  }
}/*function*/)

.prueba{
  display:inline-block;
  width:200px;
  height:20px;
  background:purple;
  content:"Bingo";
}
.sup > div{
  margin:5px;
}
.sup > div.oculto{
  display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sup">
   <div id="A">1</div>
   <div id="B">2</div>
   <div id="C">3</div>
   <div id="D">4</div>
   <div id="F">5</div>
   <div id="G">6</div>
   <div id="H">7</div>
   <div id="I">8</div>
</div>

score 0 · Answer 2

Good programming practices begin by adding ; after a line of code. Your if(){} may not work correctly because of this.

var arreglo = ["A", "B", "c", "d","E","f","g","H"];
$(".sup > div").each(function(index){
    console.log("comprobación "+index);
   for(i=0; i< arreglo.length; i++ ){
      var id_ = $(this).attr("id"); //obtiene la #id del div
      if(arreglo[i] === id_){//compara las #id si son iguales 
        console.log(arreglo[i]+" = "+id_+"        BINGO");//lo declara en la consola
        $(this).append("<div class='prueba'/>");//dibuja un div dentro
      } else if(arreglo[i] !== id_){
        console.log(arreglo[i]+" = "+id_+" NO");
        $(this).toggleClass("class");
      }
   }//for2
}/*function*/)

score 0 · Answer 3

In addition to the ; , I solved the problem with a variable that verifies if the id exists and verifies it outside the for of the array:

var arreglo = ["A", "B", "c", "d","E","f","g","H"];

$(".sup > div").each(function(index){

    console.log("comprobación"+index);
  var existe;
  for(i=0; i< arreglo.length; i++ ){
      var id_ = $(this).attr("id"); //obtiene la #id del div
      existe = false;
      if(arreglo[i] === id_){//compara las #id si son iguales 
        console.log(arreglo[i]+" = "+id_+" BINGO");//lo declara en la consola
        $(this).append("<div class='prueba'/>");//dibuja un div dentro
        existe = true; // seteo la variable para corroborar que si existe el id 
        break; //me salgo del for
      }
   }//for2
   if(!existe)   { 
    $(this).remove(); 
   }else{
        console.log(arreglo[i]+" = "+id_+" NO");
   }
}/*function*/)