ソートされたdivをHTMLに表示する方法

Question

私はこのdivのグループをソートするためにこのコードを使って、各divの値（id）を取得することができます。私は配列をソートします。

問題は、並べ替えられたdivを画面に表示する方法がわかりません。私はこれを試してみましたが、id値しか表示されません。ソートされたdivを表示する方法はありますか？

for (var j=0; j<portfolio.length; j++) 
{ 
    $('#portfolio-divs').append(portfolio[j]); 
} 

完全なコード

  <br><br> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2"> 
       <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 2</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1"> 
       <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 1</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4"> 
       <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 4</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3"> 
       <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 3</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6"> 
       <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 6</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5"> 
       <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 5</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8"> 
       <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 8</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7"> 
       <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
       <h3 align="center">Website 7</h3> 
      </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 

     </div> <!-- ./row --> 
     </div> 

JS：

var x = document.getElementsByClassName('pss'); 

var portfolio = new Array; 

for(var i=0; i<x.length; i++) 
{ 
    var y = document.getElementsByClassName('pss')[i].getAttribute('id'); 
    portfolio.push(y); 
} 

portfolio.sort(); 

for (var j=0; j<portfolio.length; j++) 
{ 
    $('#portfolio-divs').append(portfolio[j]); 
} 

Answer 1

あなたはID文字列からオブジェクトを作成したいです。

$('#portfolio-divs').append($('#'+portfolio[j])); 

var x = document.getElementsByClassName('pss'); 
 

 
var portfolio = new Array; 
 

 
for (var i = 0; i < x.length; i++) { 
 
    var y = document.getElementsByClassName('pss')[i].getAttribute('id'); 
 
    portfolio.push(y); 
 
} 
 

 
portfolio.sort(); 
 

 
for (var j = 0; j < portfolio.length; j++) { 
 
    $('#portfolio-divs').append($('#'+portfolio[j])); 
 
}

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

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2"> 
 
    <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 2</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1"> 
 
    <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 1</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4"> 
 
    <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 4</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3"> 
 
    <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 3</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6"> 
 
    <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 6</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5"> 
 
    <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 5</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8"> 
 
    <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 8</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7"> 
 
    <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center> 
 
    <h3 align="center">Website 7</h3> 
 
</div> 
 
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 --> 
 

 
</div> 
 
<!-- ./row --> 
 
</div> 
 

 
<h1>portfolio-divs</h1> 
 

 
<div id="portfolio-divs"></div>

Answer 2

あなただけhtml()DEMOを使用してソートされたコンテンツを持つ親のdivのHTMLコンテンツを変更することができます。この場合、複数の.rowsで、ソートしたい複数の要素を持っている場合は

var sorted = $('.pss').sort(function(a, b) { 
    return $(a).attr('id').localeCompare($(b).attr('id')) 
}) 

$('.row').html(sorted) 

その後、ループにそれぞれ1を必要とし、ソート内部DEMOを実行します。

$('.row').each(function() { 
    var sorted = $(this).find('.pss').sort(function(a, b) { 
    return $(a).attr('id').localeCompare($(b).attr('id')) 
    }) 

    $(this).html(sorted) 
})