選択リストを使用してdivをソートする

Question

私は以下のオプション選択リストと、表示される内容のdivのセットを持っています。私はjqueryを使用してこれを行うことができますオプションを選択すると、divの並べ替えをしたいですか？

<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

あなたはjQueryのからsortを使用することができます。この

<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

を使用してください。

$("#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