Сортировать элементы IMG в алфавитном порядке по альт в JQuery

Question

У меня есть несколько элементов на стороне:

https://jsfiddle.net/vvbpvt0c/

<figure class="img-space"> 
<img src="http://placehold.it/150/30ac17" alt="qwqwqwaccusamus beatae ad facilis cum similique qui sunt"> 
<figcaption class="text-img">accusamus beatae ad facilis cum similique qui sunt</figcaption></figure> 

, и я хочу, чтобы отсортировать их IMG [Alt] и показать на стороне, сортировки() доном Не работай.

Answer 1

Так что это возможный путь. Сорт сделан, и они сортируются по figcaption. Если вы хотите сделать это по тексту alt, тогда вы можете убедиться, что все они имеют alt и просто используют $ (a) .find ("img"). Attr ("alt") вместо селектора, который я использовал , Кредит, в котором должен быть кредит, я использовал http://james.padolsey.com/snippets/sorting-elements-with-jquery/ в качестве точки перехода.

jQuery.fn.sortElements = (function() { 
 

 
    var sort = [].sort; 
 

 
    return function(comparator, getSortable) { 
 

 
    getSortable = getSortable || function() { 
 
     return this; 
 
    }; 
 

 
    var placements = this.map(function() { 
 

 
     var sortElement = getSortable.call(this), 
 
     parentNode = sortElement.parentNode, 
 

 
     // Since the element itself will change position, we have 
 
     // to have some way of storing its original position in 
 
     // the DOM. The easiest way is to have a 'flag' node: 
 
     nextSibling = parentNode.insertBefore(
 
      document.createTextNode(''), 
 
      sortElement.nextSibling 
 
     ); 
 

 
     return function() { 
 

 
     if (parentNode === this) { 
 
      throw new Error(
 
      "You can't sort elements if any one is a descendant of another." 
 
     ); 
 
     } 
 

 
     // Insert before flag: 
 
     parentNode.insertBefore(this, nextSibling); 
 
     // Remove flag: 
 
     parentNode.removeChild(nextSibling); 
 

 
     }; 
 

 
    }); 
 

 
    return sort.call(this, comparator).each(function(i) { 
 
     placements[i].call(getSortable.call(this)); 
 
    }); 
 

 
    }; 
 

 
})(); 
 

 
$("button").on("click", function() { 
 
    $("figure").sortElements(function(a, b) { 
 
    var aStr = $(a).find("figcaption").text().toUpperCase(), 
 
     bStr = $(b).find("figcaption").text().toUpperCase(); 
 
    return aStr.localeCompare(bStr); 
 
    }) 
 
})

img { 
 
    float: left; 
 
} 
 
figcaption { 
 
    float: left; 
 
    margin-left: 5px; 
 
    width: 100px; 
 
} 
 
figure { 
 
    clear: both; 
 
    height: 175px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="sort"> 
 
    Sort them! 
 
</button> 
 
<figure class="img-space"> 
 
    <img src="http://placehold.it/150/30ac17" alt="accusamus beatae ad facilis cum similique qui sunt"> 
 
    <figcaption class="text-img">accusamus beatae ad facilis cum similique qui sunt</figcaption> 
 
</figure> 
 
<figure class="img-space"> 
 
    <img src="http://placehold.it/150/30ac17" alt="accusamus beatae ad facilis cum similique qui sunt"> 
 
    <figcaption class="text-img">aaassaccudsasamus beatae ad facilis cum similique qui sunt</figcaption> 
 
</figure> 
 
<figure class="img-space"> 
 
    <img src="http://placehold.it/150/30ac17" alt="accusamus beatae ad facilis cum similique qui sunt"> 
 
    <figcaption class="text-img">fdsffsfsaccusamus beatae ad facilis cum similique qui sunt</figcaption> 
 
</figure>