排序元素的jQuery

Question

我有側幾個要素按alt字母的img：

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

所以這裏有一個可能的方法。排序完成後，他們按照無花果進行排序。如果你想用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>