Tengo un montón de divs con algo de texto en ellos. Estoy tratando de crear una función simple que apunte a divs con un texto específico y les dé una clase. También quiero dar a los divs con otro texto una clase común.
Me las arreglé para apuntar a los divs con los textos específicos, pero no puedo averiguar cómo apuntar a los divs con otros textos.
este es el html
<h1>The divs</h1>
<div>High</div>
<div>Low</div>
<div>Medium</div>
<div>Hit 'em high</div>
<div>Medium rare</div>
<div>A funky name</div>
y esta es la funcion
const divs = document.querySelectorAll('div');
function classChanger () {
for (let i = 0; i < divs.length; i++) {
if (divs[i].textContent === 'High') {
divs[i].classList.add('high');
} if (divs[i].textContent === 'Medium') {
divs[i].classList.add('medium');
} if (divs[i].textContent === 'Low') {
divs[i].classList.add('low');
} if (divs[i].textContent === 'anything') {
divs[i].classList.add('none');
}
}
};
classChanger();
He intentado usar varios estados if más con !== 'Alto' y así sucesivamente, pero simplemente sobrescriben el código anterior.
Entonces, solo me pregunto, ¿cómo me dirijo a los últimos tres divs y no les doy la clase ninguno? He intentado buscar en Google, pero no creo que esté buscando en Google la pregunta correcta, por eso estoy preguntando aquí.
Puede agregar High , Medium y Low a una matriz. A medida que recorre los elementos, verifique si la matriz includes el texto (y establezca la clase en la versión en minúsculas del texto), de lo contrario, agregue una clase none .
const divs = document.querySelectorAll('div');
const range = ['High', 'Medium', 'Low'];
function classChanger() {
for (let i = 0; i < divs.length; i++) {
const text = divs[i].textContent;
if (range.includes(text)) {
divs[i].classList.add(text.toLowerCase());
} else {
divs[i].classList.add('none');
}
}
}
classChanger();
.high { color: red; }
.medium { color: orange; }
.low { color: yellow; }
.none { color: darkgray; }
<div>High</div>
<div>Low</div>
<div>Medium</div>
<div>Hit 'em high</div>
<div>Medium rare</div>
<div>A funky name</div>
Puede usar una declaración else if como esta:
const divs = document.querySelectorAll("div");
function classChanger() {
for (let i = 0; i < divs.length; i++) {
if (divs[i].textContent === "High") {
divs[i].classList.add("high");
} else if (divs[i].textContent === "Medium") {
divs[i].classList.add("medium");
} else if (divs[i].textContent === "Low") {
divs[i].classList.add("low");
} else {
divs[i].classList.add("none");
}
}
}
classChanger();
Si desea orientar elementos en función del contenido, primero debe crear una función para tal fin como:
function queryElementsWithFilter(selector, filterCallback) {
if (typeof selector !== 'string') throw new TypeError('param 1 must be a string')
if (typeof filterCallback !== 'function') throw new TypeError('param 2 must be a function')
const nodes = [...document.querySelectorAll(selector)]
return nodes.filter(filterCallback)
}
Ahora puedes obtener los elementos que quieras y hacer cualquier cosa con ellos.
const textTokens = ['High', 'Medium', 'Low']
textTokens.forEach(textToken => {
const divCollection = queryElementsWithFilter(
'div',
node => node.textContent === textToken
)
divCollection.forEach(div => div.classList.add(textToken.toLowerCase()))
})
const unmatchedNodes = queryElementsWithFilter(
'div',
node => !textTokens.includes(node.textContent)
)
unmatchedNodes.forEach(div => div.classList.add('none'))