¿Cómo ordenar el elemento por valor numérico del atributo de datos usando JavaScript?

La tarea es ordenar los atributos de datos numéricos, hay muchas formas de ordenar los elementos HTML por el valor numérico de los atributos de datos con la ayuda de JavaScript. En este artículo, explicaremos los más populares y los que consumen menos tiempo.

Ejemplo 1: Primero, seleccione el elemento exterior (var exterior). Obtenga elementos secundarios del elemento externo mediante el uso de . método find() y aplique el método sort() en los elementos secundarios de external. Devuelve la diferencia entre 2 elementos accediendo a su propiedad mediante la propiedad el.dataset.percentage .

Programa:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Sort element by numerical value 
        of data attribute with JavaScript
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <style>
        .outer {
            width: 200px;
        }
          
        .child {
            margin: 10px;
        }
          
        h1 {
            color: green;
        }
          
        #geeks {
            color: green;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>
  
<body id="body">
    <center>
  
        <h1> 
          GeeksforGeeks 
        </h1>
        <b>
          Click on button to perform operation
        </b>
        <br>
        <div class="outer">
            <div class="child"
                 data-percentage="34">34</div>
            <div class="child" 
                 data-percentage="61">61</div>
            <div class="child" 
                 data-percentage="17">17</div>
            <div class="child" 
                 data-percentage="49">49</div>
        </div>
        <br>
        <button onClick="GFG_Fun()">
            click here
        </button>
        <p id="geeks"></p>
        <script>
            var down = document.getElementById('geeks');
              
            // Main function
            function GFG_Fun() 
            {
                var $wrap = $('.outer');
                $wrap.find('.child').sort(function(a, b) 
                    {
                        return +a.dataset.percentage -
                            +b.dataset.percentage;
                    })
                    .appendTo($wrap);
                down.innerHTML = "Elements sorted";
            }
        </script>
    </center>
</body>
  
</html>

Producción:

Ejemplo 2: Primero, seleccione el elemento exterior (var exterior). Obtenga elementos secundarios de exterior mediante el método .find() y aplique el método sort() en los elementos secundarios de exterior. Devuelve la diferencia entre 2 elementos accediendo a su propiedad por el.getAttribute(‘data-percentage’) .

Programa:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Sort element by numerical value 
        of data attribute with JavaScript
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <style>
        .outer {
            width: 200px;
        }
          
        .child {
            margin: 10px;
        }
          
        h1 {
            color: green;
        }
          
        #geeks {
            color: green;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>
  
<body id="body">
    <center>
  
        <h1> 
          GeeksforGeeks 
        </h1>
        <b>
          Click on button to perform operation
        </b>
        <br>
        <div class="outer">
            <div class="child"
                 data-percentage="34">34</div>
            <div class="child" 
                 data-percentage="61">61</div>
            <div class="child" 
                 data-percentage="17">17</div>
            <div class="child" 
                 data-percentage="49">49</div>
        </div>
        <br>
        <button onClick="GFG_Fun()">
            click here
        </button>
        <p id="geeks"></p>
        <script>
            var down = document.getElementById('geeks');
              
            // Main function
            function GFG_Fun() 
            {
                var $wrap = $('.outer');
                $wrap.find('.child').sort(function(a, b) 
                {
                    return + a.getAttribute('data-percentage') - 
                    +b.getAttribute('data-percentage');
                })
                .appendTo($wrap);
                down.innerHTML = "Elements sorted";
            }
        </script>
    </center>
</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

Deja una respuesta Cancelar la respuesta