Question

我可以使用内部div对div元素进行排序吗？我想用NHY，NYC，VDB对此进行排序

<div id="sortthis">
  <div style="left: 0px; background-color: rgb(51, 102, 255); border: 3px solid blue;" id="ne-reserve-area-50" class="neIcon-20 ne-reserve ui-draggable ui-draggable-disabled ui-state-disabled" data-toggle="tooltip" data-placement="bottom" title="" data-html="true" data-container="body" data-original-title="<div style=&quot;text-align:left;&quot;><div>NHY</div><div></div><div></div><div></div></div>" aria-disabled="true">
    <div style="background:url('url') no-repeat" class="ne-status"></div>
  </div>
  <div style="left: 0px; background-color: rgb(51, 102, 255); border: 3px solid blue;" id="ne-reserve-area-50" class="neIcon-20 ne-reserve ui-draggable ui-draggable-disabled ui-state-disabled" data-toggle="tooltip" data-placement="bottom" title="" data-html="true" data-container="body" data-original-title="<div style=&quot;text-align:left;&quot;><div>NYC</div><div></div><div></div><div></div></div>" aria-disabled="true">
    <div style="background:url('url') no-repeat" class="ne-status"></div>
  </div>
  <div style="left: 0px; background-color: rgb(51, 102, 255); border: 3px solid blue;" id="ne-reserve-area-50" class="neIcon-20 ne-reserve ui-draggable ui-draggable-disabled ui-state-disabled" data-toggle="tooltip" data-placement="bottom" title="" data-html="true" data-container="body" data-original-title="<div style=&quot;text-align:left;&quot;><div>VDB</div><div></div><div></div><div></div></div>" aria-disabled="true">
    <div style="background:url('url') no-repeat" class="ne-status"></div>
  </div>
</div>

帮助。我正在使用javascript和jquery。

Answer 1

您可以使用sort功能。

$('#sortthis>div').sort(function(a,b){

    //Get the data- value
    a = $(a).data('original-title');
    b = $(b).data('original-title');

    //Extract the the string
    a = $(a).text();
    b = $(b).text();

    //compare string using localeCompare
    return a.localeCompare(b);
}).appendTo('#sortthis'); //Append the ordered div

以下是简化HTML的摘要：

$('#sortthis>div').sort(function(a, b) {
  //Get the data- value
  a = $(a).data('original-title');
  b = $(b).data('original-title');

  //Extract the the string
  a = $(a).text();
  b = $(b).text();

  //compare string using localeCompare
  return a.localeCompare(b);
}).appendTo('#sortthis'); //Append the ordered div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sortthis">
  <div data-original-title="<div style=&quot;text-align:left;&quot;><div>VDB</div><div></div><div></div><div></div></div>" aria-disabled="true">
    <div style="background:url('url') no-repeat" class="ne-status">VDB</div>
  </div>
  <div data-original-title="<div style=&quot;text-align:left;&quot;><div>NHY</div><div></div><div></div><div></div></div>" aria-disabled="true">
    <div style="background:url('url') no-repeat" class="ne-status">NHY</div>
  </div>
  <div data-original-title="<div style=&quot;text-align:left;&quot;><div>NYC</div><div></div><div></div><div></div></div>" aria-disabled="true">
    <div style="background:url('url') no-repeat" class="ne-status">NYC</div>
  </div>
</div>

对内部div元素进行排序

1 个答案: