Dado un documento HTML con un rango de elementos similares, la tarea es seleccionar un rango de esos elementos con la ayuda de JavaScript. Hay dos enfoques que se analizan a continuación con un ejemplo.
Enfoque 1: primero, seleccione todos los elementos de class = ‘child’ mediante el selector jQuery y luego use el método slice() para seleccionar un rango de elementos continuamente. Se ha cambiado el color de fondo de los elementos para ver el efecto.
- Ejemplo:
<!DOCTYPE HTML><html><head><title>How to select a range of elements in JQuery</title><scriptsrc=</script><style>h1 {color: green;}.geeks {color: green;font-size: 24px;font-weight: bold;}</style></head><body><center><h1>GeeksforGeeks</h1><b>Click on button to select a rangeof elements</b><divclass="outer"><divclass="child">Child 1</div><divclass="child">Child 2</div><divclass="child">Child 3</div><divclass="child">Child 4</div></div><br><buttononClick="gfg()">click here</button><pid="geeks"></p></center><script>var down = document.getElementById('geeks');// Defining childsvar arr = [0, 2, 3];function gfg() {var $el = $(".outer .child");for (var i = 0; i <arr.length; i++) {$el.slice(arr[i], arr[i] + 1).css("color", "red");}down.innerHTML="Range of elements selected";}</script></body></html> - Producción:
Enfoque 2: primero seleccione todos los elementos de clase = ‘niño’ mediante el selector de jQuery. Hay una array que contiene los índices de los elementos a seleccionar. Estamos recorriendo la array y usando el método slice() para seleccionar el elemento particular de ese índice. Se ha cambiado el color de fondo de los elementos para ver el efecto.
- Ejemplo:
<!DOCTYPE HTML><html><head><title>How to select a range of elements in JQuery</title><scriptsrc=</script><style>h1 {color: green;}.geeks {color: green;font-size: 24px;font-weight: bold;}</style></head><body><center><h1>GeeksforGeeks</h1><b>Click on button to select a rangeof elements</b><divclass="outer"><divclass="child">Child 1</div><divclass="child">Child 2</div><divclass="child">Child 3</div><divclass="child">Child 4</div></div><br><buttononClick="gfg()">click here</button><pid="geeks"></p></center><script>var down = document.getElementById('geeks');// Defining childsvar arr = [0, 2, 3];function gfg() {var $el = $(".outer .child");for(var i=0; i<arr.length; i++) {$el.slice(arr[i], arr[i]+1).css("color", "red");}down.innerHTML="Range of elements selected";}</script></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA