javascript - 如何使用 javascript 在单击时按数据属性对 div 进行排序？

<分区>

我有多个 div，希望能够在点击时按各种数据属性以下拉排序方式进行排序。 (请原谅所有的绒毛。div 是“element-1”，容器是“board-container”。

var divList = $(".element-1");

function sortPrice(){
divList.sort(function(a, b){ return    
$(a).data("price")-$(b).data("price")});    
$(".board-container").html(divList);}

function sortPopularity(){
divList.sort(function(a, b){ return
$(a).data("popularity")-$(b).data("popularity")});    
$(".board-container").html(divList);}


<div class="board-container">
    <div class="element-1" data-date="4" data-popularity="3">
    <a class="group1" href="img/zayn.png">
        <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/kunta.png">
    </div>
    <div class="element-1" data-date="3" data-popularity="3">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?     rel=0&amp;wmode=transparent">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/astrid.png">
    </div>
    <div class="element-1" data-date="1" data-popularity="12">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/zayn.png">
    </div>
    <div class="element-1" data-date="5" data-popularity="1">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">
                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/jason.png">
    </div>
  </div>

最佳答案

使用下拉列表并绑定(bind)更改事件处理程序，在处理程序中根据所选值对元素进行排序。

var $divList = $(".element-1");

$('#drop').change(function() {
  var prop = this.value;
  $divList.sort(function(a, b) {
    return $(a).data(prop) - $(b).data(prop)
  }).appendTo(".board-container")
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="drop">
<option value="date">Date</option>
<option value="popularity">Popularity</option>
</select>
<div class="board-container">
  <div class="element-1" data-date="4" data-popularity="3">
    <a class="group1" href="img/zayn.png">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>1
    <img src="img/kunta.png" />
  </div>
  <div class="element-1" data-date="3" data-popularity="3">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?     rel=0&amp;wmode=transparent">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>2
    <img src="img/astrid.png">
  </div>
  <div class="element-1" data-date="1" data-popularity="12">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>3
    <img src="img/zayn.png">
  </div>
  <div class="element-1" data-date="5" data-popularity="1">
    <div class="overlay-wrapper">
      <div class="overlay-text">
        <div class="table">
          <div class="cell">
            <div class="title">King Kunta</div>
            <div class="artist">Kendrick Lamar</div>
          </div>
        </div>
      </div>
    </div>4
    <img src="img/jason.png">
  </div>
</div>

关于javascript - 如何使用 javascript 在单击时按数据属性对 div 进行排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42417780/

上一篇：html - 优化按 : Unwanted newline when input is inside paragraph tag

下一篇：css - 垂直对齐 Ionic 图标和文本

相关文章：

javascript - 如何通过仅注册单击事件来检测元素的双击

javascript - 如何使用if语句jquery对数字进行动画处理

javascript - 在父元素悬停时取消子元素的过渡？

html - 如何在悬停时展开链接？在链接周围添加 "<" ">"符号？

javascript - knockout.js中的图像数据

javascript - 按照 jest docs 模拟 axios 但不工作

javascript - 除了 alert 和 document.write 之外打印输出的方法

javascript - 获取 PHP 变量到 javascript

javascript - 如何通过javascript删除.jpg后面的内容

html - 无法将 Css 应用到我的 ASP :Label