如何将已排序的div显示为HTML

时间：2017-03-13 18:30:51

标签： javascript jquery html css

我正在使用这段JS对一组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]);
}

2 个答案:

答案 0 :(得分：1)

您想要从ID字符串创建一个对象。

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

＆＃13;
＆＃13; 
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]));
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您只需使用html() DEMO更改已排序内容的父div的html内容即可。 

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

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

如果您要排序多个元素，在这种情况下需要多个.rows，那么您需要循环每个元素并在DEMO内运行排序。

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

  $(this).html(sorted)
})
相关问题
最新问题