title: Sorting a dynamically generated list by value of one of its elements
body: <p>I dynamically generate a list of files in a folder displayed as follow :</p>
  
  <pre><code>&lt;ul class="listDocs"&gt;
    &lt;li class="docResult"&gt;
      &lt;div class="file-icon"&gt;&lt;i class="fa fa-file-word-o"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class="filename_container" id="file_2" data-file="./cases/xxx.doc" data-folder=""&gt;xxx.doc&lt;/div&gt;
      &lt;div class="file_download"&gt;&lt;a href="./cases/xxx.doc" target="_blank"&gt;&lt;i class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="btn_remove_style file-remove fa fa-trash-o" data-file="./cases/xxx.doc"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="docResult"&gt;...
  </code></pre>
  
  <p>I would like to add buttons which would allow me to sort the files according various criteria. I try first to sort them by the text inside the div 'filename_container'. To do so I try the following but I don't manage to make it work :</p>
  
  <pre><code>function sortFilesByText () {
      var list = $('.listDocs');
      var listItems = list.find('filename_container').sort(function(a,b) {  
        return $(a).text() - $(b).text();
      });
      list.find('li').remove();
      list.append(listItems);
  }
  
  $(document).on('click', '#btn_sort_name', function () {
      sortFilesByText();
  });
  </code></pre>
  
  <p>I understand that by doing so I only sort the <code>&lt;div&gt;</code> 'file_container' and therefore do not append the whole code inside one li, but I don't know how to do that....</p>