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>