Question

我有以下选项选择列表和一组显示内容的div。我想在选择一个选项时对div进行排序可以使用jquery来完成吗？

<selection id="sort">
        <select>
            <option value="0">Please Select</option>
            <option value="1">Author</option>
            <option value="2">Date</option>
            <option value="3">Title</option>
        </select>
</selection>  

<div id="container">
    <div class="box">
        <h1 class="title>Title<h1>
        <h1 class="date"></h2>
        <h1 class="name>john Doe</h3> 
    </div>
</div>

Answer 1

使用此

<selection id="sort">
  <select id="ddl">
    <option value="0">Please Select</option>
    <option value="1">Author</option>
    <option value="2">Date</option>
    <option value="3">Title</option>
</select>
</selection>

    div>
        <div>
            <h1 class="title">Title<h1>
            <h1 class="date">date</h2>
            <h1 class="name">john Doe</h3>
        </div>
    </div>


  $(document).ready(function()
{
  $(".title").hide();
  $(".date").hide();
  $(".name").hide();
});

 $("#ddl").change(function()
{
  var value = $("#ddl option:selected" ).val();
  if(value == "1")
  {
    $(".title").show();
    $(".date").hide();
    $(".name").hide();
  }
   else if(value == "2")
  {
    $(".title").hide();
    $(".date").show();
    $(".name").hide();
  }
  else if(value == "3")
  {
    $(".title").hide();
    $(".date").hide();
    $(".name").show();
  }
});

Answer 2

您可以使用JQuery中的sort。

$("#ddl").change(function() {
  var value = $("#ddl option:selected").val();

  if (value == 'date') {
    boxOrdered = $('#container .box').sort(function(a, b) {
    return new Date($(a).find("." + value).text()) > new Date($(b).find("." + value).text());
  });
  } else {
    boxOrdered = $('#container .box').sort(function(a, b) {
      return $(a).find("." + value).text().toLowerCase() > $(b).find("." + value).text().toLowerCase();
    });
  }

  $("#container").html(boxOrdered);
});

试试这个：JSFiddle

使用选择列表排序div

2 个答案: