0

Tengo el siguiente código que se repite según la clase .c más un número y .eq (según el orden en la lista), me gustaría automatizar este código sin tener que repetir una y otra vez lo siguiente:

if ($(".c1 .divItem").hasClass("selected")){
$( "ul" ).find( "li#index-item .divItem" ).eq( 0 ).addClass( "selecte");
$( "ul" ).find( "li#index-item .divItem span a i" ).eq( 0 ).addClass( "circle_mark");
}
else{
$( "ul" ).find( "li#index-item .divItem" ).eq( 0 ).removeClass( "selecte");
$( "ul" ).find( "li#index-item .divItem span a i" ).eq( 0 ).removeClass( "circle_mark");
}

if ($(".c2 .divItem").hasClass("selected")){
$( "ul" ).find( "li#index-item .divItem" ).eq( 1 ).addClass( "selecte");
$( "ul" ).find( "li#index-item .divItem span a i" ).eq( 1 ).addClass( "circle_mark");
}
else{
$( "ul" ).find( "li#index-item .divItem" ).eq( 1 ).removeClass( "selecte");
$( "ul" ).find( "li#index-item .divItem span a i" ).eq( 1 ).removeClass( "circle_mark");
}

if ($(".c3 .divItem").hasClass("selected")){
$( "ul" ).find( "li#index-item .divItem" ).eq( 2 ).addClass( "selecte");
$( "ul" ).find( "li#index-item .divItem span a i" ).eq( 2 ).addClass( "circle_mark");
}
else{
$( "ul" ).find( "li#index-item .divItem" ).eq( 2 ).removeClass( "selecte");
$( "ul" ).find( "li#index-item .divItem span a i" ).eq( 2 ).removeClass( "circle_mark");
}
                               .
                               .
                               .

La idea es añadir la clase "selecte" y "circle_mark" a el elemento de la lista "x" si la clase es .c"x" Un saludo y garcias.

2
  • ¿Y el problema es?
    – JDev
    Commented el 22 jun. 2018 a las 9:27
  • 1
    Adrián márcala como respondida si crees que esta solucionado.
    – Carmen
    Commented el 22 jun. 2018 a las 11:13

2 respuestas 2

1

Construye un bucle

var num_repeticiones = 3;

for (i=1; i<=num_repeticiones; i++) {
  var name = ".c" + i + " .divItem";
  if ($(name).hasClass("selected")){
    $( "ul" ).find( "li#index-item .divItem" ).eq( i-1 ).addClass( "selecte");
    $( "ul" ).find( "li#index-item .divItem span a i" ).eq( i-1 ).addClass( "circle_mark");
  } else {
    $( "ul" ).find( "li#index-item .divItem" ).eq( i-1 ).removeClass( "selecte");
    $( "ul" ).find( "li#index-item .divItem span a i" ).eq( i-1 ).removeClass( "circle_mark");
  }
}
4
  • Este código no funcionaría, segun lo que ha mostrado de su código, no habría ninguna clase que fuera .c0, por lo que al inicio del bucle daría error
    – alex55132
    Commented el 22 jun. 2018 a las 9:35
  • Bucle modificado para que empiece en 1, gracias por la observación.
    – Carmen
    Commented el 22 jun. 2018 a las 9:40
  • Muchas Gracias me funciona a la perfección añadí .eq( i-1 ) para que el valor de .eq fuese igual que el de la clase "c+nº" y perfecto Commented el 22 jun. 2018 a las 10:37
  • Perfecto, lo edito para dejarlo marcado.
    – Carmen
    Commented el 22 jun. 2018 a las 10:41
0

Para eso puedes usar un bucle for:

var counter = 0;
var max; //Defina esta variable para definir el maximo en el que el bucle se ejecuta
for(var i = 1; i < max; i++) {
  if ($(".c"+i+" .divItem").hasClass("selected")){
    $( "ul" ).find( "li#index-item .divItem" ).eq( counter ).addClass( "selecte");
    $( "ul" ).find( "li#index-item .divItem span a i" ).eq( counter ).addClass("circle_mark");
  } else {
    $( "ul" ).find( "li#index-item .divItem" ).eq( counter  ).removeClass( "selecte");
    $( "ul" ).find( "li#index-item .divItem span a i" ).eq( counter  ).removeClass("circle_mark");
  }
  counter = counter + 1;
}

No he testeado el codigo pero debería funcionar.

EDIT: Ahora si que deberia estar funcionar

2
  • 1
    alex55132 en el bucle debería ser 'i < max' en lugar de 'i > max' ya que es de recorrido ascendente y asi nunca entrará en el bucle ya que i nunca será mayor del máximo.
    – Carmen
    Commented el 22 jun. 2018 a las 10:24
  • Cierto, modifico la respuesta, gracias @Carmen
    – alex55132
    Commented el 22 jun. 2018 a las 12:35

Tu Respuesta

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

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