Sorting Div by image names In Descending Order?
<p>*<strong>Please Read Fully   - I'm using example coding first -then my actual to be more descriptive *</strong> </p>

<p>I would like to  sort a div by DESCENDING order based on their image name.  </p>

<p>Change From this:</p>

<pre><code>&lt;div id="content"&gt;
&lt;p&gt;&lt;img src="image/1.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="image/3.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="image/4.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="image/2.jpg"/&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>To This</p>

<pre><code>&lt;div id="content"&gt;
&lt;p&gt;&lt;img src="image/4.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="image/3.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="image/2.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="image/1.jpg"/&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p><strong>However</strong> I'm using this code here to populate images within the "content" div. These image paths are being pull from another directory with this code below since users are uploading images on a daily basis. That content div needs to self populate.</p>

<pre><code>&lt;script&gt;
$.ajax({
  url: "user-uploads-thumbnails",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
        // will loop through 
var images = 'user-uploads-thumbnails/' + $(this).attr("href");
var linkimage = 'user-uploads/' + $(this).attr("href");
 //backup $('&lt;p&gt;&lt;a href="' + linkimage + '"&gt;&lt;img src="' + images + '"&gt;&lt;/a&gt;&lt;/p&gt;').appendTo('#content');
$('&lt;p&gt;&lt;a class="fancybox" href="' + linkimage + '" data-fancybox-group="gallery"&gt;&lt;img src="' + images + '"&gt;&lt;/a&gt;&lt;/p&gt;').appendTo('#content');
     });
  }
});
&lt;/script&gt; 
</code></pre>

<p><strong>This Script below works ONLY when I hard code the urls into the "content" div. However, Images are going to be added to the other directory daily, and I need it to self populate. When I use the script above to pull the paths  ^^ it doesn't work.</strong> </p>

<pre><code>&lt;script&gt;
function sort(container) {
    var images = [],
        paragraphs = container.getElementsByTagName('p');        
    while(!!paragraphs.length) {
        var p = paragraphs[0];
        images.push(p.getElementsByTagName('img')[0].getAttribute('src'));
        container.removeChild(p);
    }
    images = images.sort();
    console.log(images);
    for(var i = images.length; i-- &gt; 0;) {
        var p = document.createElement('p'),
            img = document.createElement('img');
            img.src = images[i];
            p.appendChild(img);
        container.appendChild(p);
    }
}

var container = document.getElementById('content');
sort(container);
&lt;/script&gt;
</code></pre>
