jQuery使用jQuery排序在多列内排序div

Question

我有一个包含六列的主列表。在这列中有几行。我想使用jquery排序对商店名称和城市进行排序。有没有办法让它这样做？我需要点击标题对城市或商店名称进行排序。

标题

<div class="row storeDetails-heads">
     <div class="col-sm-2"><p class="store-pop-p">Store Name/URL</p></div>
     <div class="col-sm-2"> <p class="store-pop-p">Address</p> </div>
     <div class="col-sm-2"> <p class="store-pop-p">City</p> </div>
</div>

结果

<div class="row storeDetails-text">
    <div class="col-sm-2">
        <p class="store-pop-p2 cnl_1" >
           <span class="store-pop-span1">Store Name: </span> 
           <span class="store-pop-span2">ABC</span>
        </p>
        <div class="clear"></div>
    </div>
    <div class="col-sm-2">
        <p class="store-pop-p2 cnl_1" >
           <span class="store-pop-span1">Address </span> 
           <span class="store-pop-span2">ABC</span>
        </p>
        <div class="clear"></div>
    </div>
    <div class="col-sm-2">
        <p class="store-pop-p2 cnl_1" >
           <span class="store-pop-span1">City </span> 
           <span class="store-pop-span2">Alaska</span>
        </p>
        <div class="clear"></div>
    </div>
</div>

<div class="row storeDetails-text">
    <div class="col-sm-2">
        <p class="store-pop-p2 cnl_1" >
           <span class="store-pop-span1">Store Name: </span> 
           <span class="store-pop-span2">XYZ</span>
        </p>
        <div class="clear"></div>
    </div>
    <div class="col-sm-2">
        <p class="store-pop-p2 cnl_1" >
           <span class="store-pop-span1">Address </span> 
           <span class="store-pop-span2">BMY</span>
        </p>
        <div class="clear"></div>
    </div>
    <div class="col-sm-2">
        <p class="store-pop-p2 cnl_1" >
           <span class="store-pop-span1">City </span> 
           <span class="store-pop-span2">Newyork</span>
        </p>
        <div class="clear"></div>
    </div>
</div>

Answer 1

您可以使用 sort() 进行排序

$('.storeDetails-heads div p').click(function() {
  // binding event handler to p tag  
  var index = $(this).parent().index();
  // getting column index
  $('#values>div').sort(function(a, b) {
    var txt1 = $(a).children('div').eq(index).find('.store-pop-span2').text(),
      // getting value of column for comparing based on clicked p index
      txt2 = $(b).children('div').eq(index).find('.store-pop-span2').text();
      // getting value of column for comparing based on clicked p index
    if (txt1 > txt2)
      return 1;
    if (txt1 < txt2)
      return -1;
    return 0;
  }).appendTo('#values');
  // for updating sorted data appending back to dom 
});

.row {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row storeDetails-heads">
  <div class="col-sm-2">
    <p class="store-pop-p">Store Name/URL</p>
  </div>
  <div class="col-sm-2">
    <p class="store-pop-p">Address</p>
  </div>
  <div class="col-sm-2">
    <p class="store-pop-p">City</p>
  </div>
</div>
<div id=values>

  <div class="row storeDetails-text">
    <div class="col-sm-2">
      <p class="store-pop-p2 cnl_1">
        <span class="store-pop-span1">Store Name: </span> 
        <span class="store-pop-span2">XYZ</span>
      </p>
      <div class="clear"></div>
    </div>
    <div class="col-sm-2">
      <p class="store-pop-p2 cnl_1">
        <span class="store-pop-span1">Address </span> 
        <span class="store-pop-span2">BMY</span>
      </p>
      <div class="clear"></div>
    </div>
    <div class="col-sm-2">
      <p class="store-pop-p2 cnl_1">
        <span class="store-pop-span1">City </span> 
        <span class="store-pop-span2">AaaaNewyork</span>
      </p>
      <div class="clear"></div>
    </div>
  </div>
  <div class="row storeDetails-text">
    <div class="col-sm-2">
      <p class="store-pop-p2 cnl_1">
        <span class="store-pop-span1">Store Name: </span> 
        <span class="store-pop-span2">ABC</span>
      </p>
      <div class="clear"></div>
    </div>
    <div class="col-sm-2">
      <p class="store-pop-p2 cnl_1">
        <span class="store-pop-span1">Address </span> 
        <span class="store-pop-span2">ABC</span>
      </p>
      <div class="clear"></div>
    </div>
    <div class="col-sm-2">
      <p class="store-pop-p2 cnl_1">
        <span class="store-pop-span1">City </span> 
        <span class="store-pop-span2">Alaska</span>
      </p>
      <div class="clear"></div>
    </div>
  </div>

</div>