En este artículo, veamos cómo podemos ordenar los elementos HTML utilizando el atributo de datos.
Podemos ordenar los elementos HTML como listas o cualquier otro usando el atributo de datos. El atributo de datos consta de 2 partes que son el prefijo y el sufijo, el prefijo de datos- es obligatorio y el sufijo de datos- puede ser cualquier nombre personalizado que relacione los datos en los elementos, y debe tener al menos un carácter en minúscula . Se puede acceder a los datos mediante la propiedad del conjunto de datos.
Sintaxis:
data-anysuffix
En este artículo, clasificamos los elementos de la lista desordenada utilizando el atributo de datos con valores variables en los que se ordenarán los elementos.
Ejemplo 1: Ordenar y agrupar las materias y sus temas en función de la materia como atributo de datos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
h1 {
color: green;
}
button {
color: green;
border-radius: 5px;
}
</style>
</head>
<!-- Whatever content in body tag
appears on the webpage-->
<body>
<h1>GeeksforGeeks</h1>
<hr>
<ul id="list">
<li class="subject" data-subject="Operating systems">
Operating systems: Paging
</li>
<li class="subject" data-subject="DBMS">
DBMS: E.R Modeling
</li>
<li class="subject" data-subject="Operating systems">
Operating systems: Deadlock
</li>
<li class="subject" data-subject="Data Structures">
Data Structures: Queue
</li>
<li class="subject" data-subject="Data Structures">
Data Structures: Stack
</li>
<li class="subject" data-subject="Data Structures">
Data Structures: Trees
</li>
<li class="subject" data-subject="DBMS">DBMS: SQL</li>
<li class="subject" data-subject="Data Structures">
Data Structures: Arrays
</li>
<li class="subject" data-subject="Operating systems">
Operating systems: Segmentation
</li>
<li class="subject" data-subject="DBMS">
DBMS: Queries
</li>
<li class="subject" data-subject="DBMS">
DBMS: E.E.R Modeling
</li>
<li class="subject" data-subject="Operating systems">
Operating systems: CPU scheduling
</li>
<li class="subject" data-subject="DBMS">
DBMS: Normalization
</li>
<li class="subject" data-subject="Data Structures">
Data Structures: Linked List
</li>
</ul>
<!-- onclick event to sort data-->
<button onclick="SortData()">
Sort HTML elements by Data Attributes
</button>
<script>
function comparator(a, b) {
if (a.dataset.subject < b.dataset.subject)
return -1;
if (a.dataset.subject > b.dataset.subject)
return 1;
return 0;
}
// Function to sort Data
function SortData() {
var subjects =
document.querySelectorAll("[data-subject]");
var subjectsArray = Array.from(subjects);
let sorted = subjectsArray.sort(comparator);
sorted.forEach(e =>
document.querySelector("#list").
appendChild(e));
}
</script>
</body>
</html>
Salida: después de hacer clic en el botón, los datos se ordenaron según el atributo de datos de los elementos HTML y la lista reorganizada apareció en la salida.
Ejemplo 2: ordenar enteros según los atributos de datos de la lista:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
h1 {
color: green;
}
button {
color: green;
border-radius: 5px;
}
</style>
</head>
<!-- Whatever content in body tag
appears on the webpage-->
<body>
<h1>GeeksforGeeks</h1>
<hr>
<ul id="list">
<li class="index" data-index="1">1 </li>
<li class="index" data-index="5">5</li>
<li class="index" data-index="2">2</li>
<li class="index" data-index="3">3</li>
<li class="index" data-index="4">4 </li>
</ul>
<!-- onclick event to sort data-->
<button onclick="SortData()">
Sort HTML elements by Data Attributes
</button>
<script>
function comparator(a, b) {
if (a.dataset.index < b.dataset.index)
return -1;
if (a.dataset.index > b.dataset.index)
return 1;
return 0;
}
// Function to sort Data
function SortData() {
var indexes = document.querySelectorAll("[data-index]");
var indexesArray = Array.from(indexes);
let sorted = indexesArray.sort(comparator);
sorted.forEach(e =>
document.querySelector("#list").appendChild(e));
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA