0

Necesito un poco de ayuda para agregar una clase a varios elementos. Por ejemplo si tengo 5 div dentro de un contenedor y colocando un numero 4 que sera enviado por post en el script se agregara la clase en solo los primeros 4 elementos. y si coloco un 3, se agregara la clase a solo a los 3 primeros elementos.

Espero me puedan ayudar con una parte de código que no se mucho al respecto.

1
  • 1
    Que tal Oriel, usar el método post es necesario?? La idea de javascript es poder manipular el DOM según lo necesites... La verdad no habría necesidad de usar código en PHP(lo digo por la etiqueta) para hacer esto Commented el 7 jun. 2019 a las 2:06

2 respuestas 2

1

Espero servir de ayuda. También te comento que para próximas preguntas incluyas algo de código que ya tengas hecho. Es importante. Ya que no tengo ningúna muestra de tu código, los selectores que voy a usar en las funciones están un puestos sin ids.

$(document).ready(function() {
    var val = <?php echo $_POST['value'] ?>; // Aqui va el valor que has pasado por el POST
    while(val>0){
    $('div').eq(val).addClass('class_name');
    // Selecciona el div nº val en la vista y le añade la clase 'class_name'
    val--;
    }
});
7
  • Ahí tienes un bucle infinito. Tienes que actualizar el valor de val dentro del bucle (y de paso, añade indentado al contenido del bucle para que se lea mejor).
    – ArianJM
    Commented el 7 jun. 2019 a las 9:41
  • @ArianJM solucionado, se me olvido decrementar el bucle.
    – wasanga7
    Commented el 7 jun. 2019 a las 9:42
  • También deberías usar $('div').eq(val)...; en lugar de $('div')[val]... porque con .eq() te devuelve un objeto jQuery con el que puedes llamar a addClass, pero con [val] te devuelve un elemento HTML al que no puedes llamar .addClass(). Necesitarías $($('div')[val])... (es decir convertir el elemento HTML en objeto jQuery).
    – ArianJM
    Commented el 7 jun. 2019 a las 9:44
  • @ArianJM hecho! Gracias por la corrección!
    – wasanga7
    Commented el 7 jun. 2019 a las 9:47
  • Y aún otra opción sería, quitar el while entero y coger los primeros val hijos del contenedor que tiene los div: $('#contenedor').children().slice(0, val).addClass('class_name'). Perdona por dejar tantos comentarios xD
    – ArianJM
    Commented el 7 jun. 2019 a las 9:48
0

Ahorrándote la parte de jQuery el concepto puede ser el siguiente.

En primer lugar tu tienes un div que tiene N div hijos. Estos hijos puedes obtenerlos con un querySelectorAll, de esta forma:

const childrenDivs = document.querySelectorAll('#container > div');

Esto te devuelve una NodeList, que es iterable a través del método .forEach().

Este método pasa su callback los siguientes valores: element, elementIndex y obj, siendo este último el NodeList original.

Sabiendo esto podríamos hacer una función que itere sobre los elementos de esta NodeList, comprobar si su índice es el adecuado y operar sobre ello.

De esta forma podríamos tener este caso:

const addClassToNChildElements = (limit, classToAdd) => {
  const allElements = document.querySelectorAll('#container > div'); // Seleccionamos todos los hijos de #container
  allElements.forEach((element, index) => {
    if(index < limit) {
      element.classList.add(classToAdd);
    }
  });
}

document.querySelector('#addSelectedButton').addEventListener('click', () => {
  addClassToNChildElements(5, 'selected');
})

document.querySelector('#addAlsoSelectedButton').addEventListener('click', () => {
  addClassToNChildElements(4, 'also-selected');
})
div.selected {
  background-color: red;
  color: white;
  transition: all .3s ease-in-out;
}

div.also-selected {
  border-radius: 5px;
  border: solid 1px #e6e6e6;
  padding: 20px;
  margin-bottom: 20px;
  transition: all .3s ease-in-out;
}
<div id="container">
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
  <div>DIV 4</div>
  <div>DIV 5</div>
  <div>DIV 6</div>
  <div>DIV 7</div>
  <div>DIV 8</div>
  <div>DIV 9</div>
  <div>DIV 10</div>
</div>

<button id="addSelectedButton">Add selected class to 5 elements</button>

<button id="addAlsoSelectedButton">Add also-selected class to 4 elements</button>

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.