Necesito agregar un filtro a una función.
Tengo diferentes elementos en la página con la clase a-text-center table-border , pero necesito que el código funcione solo si el valor del elemento es > 1, por lo que la secuencia de comandos no afectará a otros elementos.
No puedo agregar nada al código, como una identificación o cualquier otra cosa al elemento para diferenciarlo de los demás, por lo que la única forma de diferenciarlo es usando el value del número dentro de este elemento.
Ejemplo del elemento:
<td class="a-text-center table-border">4</td> En este caso el valor es 4 .
Este es el guión:
$(document).ready(function() { var x = (document).getElementsByClassName('a-text-center table-border'); for (var i = 0; i < x.length; i++) x.item(i).className += " bordertopred";En primer lugar, tenga en cuenta que los elementos td no tienen un value . Lo que está tratando de leer es el innerText del elemento. Esto se puede hacer usando filter() después de seleccionar los elementos necesarios del DOM.
También tenga en cuenta que si incluye jQuery en la página, también puede utilizarlo para hacer lo que necesita. A continuación se muestran dos versiones del código, una que utiliza jQuery y la otra JS simple.
Primero el simple JS:
document.addEventListener('DOMContentLoaded', () => { let valueToMatch = '4'; let elements = Array.from(document.querySelectorAll('.a-text-center.table-border')).filter(el => el.innerText.trim() === valueToMatch); elements.forEach(el => el.classList.add("bordertopred")); }); td { padding: 10px; } .bordertopred { background-color: #CC0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table> <tr> <td class="a-text-center table-border">1</td> <td class="a-text-center table-border">2</td> <td class="a-text-center table-border">3</td> <td class="a-text-center table-border">4</td> </tr> </table>Este sería el equivalente jQuery:
jQuery($ => { let valueToMatch = '4'; $('.a-text-center.table-border').filter((i, el) => el.innerText.trim() === valueToMatch).addClass('bordertopred'); }); td { padding: 10px; } .bordertopred { background-color: #CC0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table> <tr> <td class="a-text-center table-border">1</td> <td class="a-text-center table-border">2</td> <td class="a-text-center table-border">3</td> <td class="a-text-center table-border">4</td> </tr> </table>No entiendo. ¿No puede agregar la declaración if en su función?
<script> $(document).ready(function(){ var x = (document).getElementsByClassName('a-text-center table-border'); for(var i = 0; i < x.length; i++) { if (i > 1) x.item(i).className += " bordertopred"; } </script> También me inclinaría a usar x.item(i).className.add('yourclass');