Tengo una tarjeta de perfil que contiene una función de trabajo dentro de un lapso, y estoy tratando de obtener el contenido de la función de trabajo usando textContent, y si coincide con una palabra determinada, quiero agregar una clase al lapso.
<span class="jobrole">Manager</span>Aquí está el javascript:
var text = document.querySelector(".jobrole").textContent; var job = document.querySelector(".jobrole"); if (text == "Manager") { for (var i = 0; i < job.length; ++i) { job.classList.add("manager"); } }Sin embargo, no está aplicando la clase de administrador a ninguno de los tramos que contienen la cadena "administrador".
Si desea aplicar solo al primer elemento encontrado con contenido Manager , debe implementar de esta manera
var job = document.querySelector(".jobrole"); var text = job.textContent; if (text === "Manager") { job.classList.add("manager"); } <span class="jobrole">Manager</span> Si desea tener muchos más elementos similares con el contenido Manager , debe usar querySelectorAll en su lugar.
var jobs = document.querySelectorAll(".jobrole"); for (var i = 0; i < jobs.length; i++) { var text = jobs[i].textContent; if (text === "Manager") { jobs[i].classList.add("manager"); } } <span class="jobrole">Manager</span> <span class="jobrole">Manager</span> Otro caso es que desea verificar varios tipos de administradores, como Store Manager , Operation Manager , etc. Con este patrón, puede usar .includes
var jobs = document.querySelectorAll(".jobrole"); for (var i = 0; i < jobs.length; i++) { var text = jobs[i].textContent; if (text && text.toLowerCase().includes("manager")) { //ignore case sensitive for `text` which means `manager` is also a match jobs[i].classList.add("manager"); } } <span class="jobrole">Store Manager</span> <span class="jobrole">Operation Manager</span>1) Si solo desea agregar una clase que tenga textContent como manager , también puede usar expresiones regulares aquí como:
textContent.match(/^manager$/i) // case-sensitive const allJobRoleEl = document.querySelectorAll(".jobrole"); allJobRoleEl.forEach((jobRoleEl) => { const textContent = jobRoleEl.textContent; if (textContent.match(/^manager$/i)) { jobRoleEl.classList.add("manager"); } }); .manager { background-color: red; color: white; padding: 0.25rem; margin: 0.5rem; border-radius: 4px; } <span class="jobrole">Manager</span> <span class="jobrole">Developer</span> <span class="jobrole"> QA Manager </span> <span class="jobrole"> Dev Manager</span> NOTA: Pero si desea agregar clase a todos esos elementos que contain el manager texto, puede hacer lo siguiente:
textContent.match(/^manager$/i) // case-sensitive const allJobRoleEl = document.querySelectorAll(".jobrole"); allJobRoleEl.forEach((jobRoleEl) => { const textContent = jobRoleEl.textContent; if (textContent.match(/manager/i)) { jobRoleEl.classList.add("manager"); } }); .manager { background-color: red; color: white; padding: 0.25rem; margin: 0.5rem; border-radius: 4px; } <span class="jobrole">Manager</span> <span class="jobrole">Developer</span> <span class="jobrole"> QA Manager </span> <span class="jobrole"> Dev Manager</span>