-2

Cree un pequeño script que recorre unos div, revisa si estos comparten una de las ‪#‎id‬ que hay en el ‪#‎array‬ y si es así agrega un div dentro.

Quiero hacer que si no cumple la regla el div desaparezca pero si uso else{ $(this).remove()} me borra todos los div.

Cuando uso else{ $(this).addClass() le aplica la clase a los que cumplen la 1 condición, no a los que no la cumple. ¿Saben por que puede ser?

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

2
  • de momento lo resolvi asi jsfiddle.net/iqudoblev/6v9hvza4/7 si cumple agrega la clase ".a", si no la cumple ".b". como el script me cargaba las 2 clases si la cumplia la primera y solo la segunda si no lo cumplia. hice por css que .b{display:none} .a.b{display:inherit} si alguien tiene una solución mas elegante porfa que la ponga el 4 may. 2016 a las 16:30
  • Cuando decís if(arreglo[i] === id_) el arreglo[i] e Id son del mismo tipo? no hay un int y double o float?. O Mejor dicho, Hace falta comprar los tipos? o vos queres saber si 2==2.00 el 4 may. 2016 a las 16:53

3 respuestas 3

1

Puedes simplificar bastante el código. Para comprobar si un id existe en el array puedes utilizar el método some del objeto Array. A partir de ahí, si existe le añades el div y si no le añades la clase para ocultarlo:

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>

1
  • Si lo prefieres en lugar del método some podrías utilizar el findIndex. el 17 may. 2016 a las 11:48
0

Las buenas prácticas de programación comienzan agregando ; después de una línea de código. Puede que tu if(){} no funcione de manera correcta debido a esto.

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*/)
1
  • 2
    Aunque tienes razón en que usar ; es lo recomendado el hecho de que no funcionará el programa por esa causa no es cierto ya que el interprete de javascript agrega un ; automaticamente al final de cada línea en caso que no sea especificado. Lee howtocreate.co.uk/tutorials/javascript/semicolons
    – devconcept
    el 4 may. 2016 a las 16:57
0

Además de los ;, el problema lo solucioné con una variable que verifique si existe el id y lo compruebe fuera del for del arreglo:

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*/)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.