Aide à la programmation, réponses aux questions / Javascript / Trier les divs en utilisant jQuery en fonction du contenu des éléments enfants - javascript, jquery, html, sorting, jquery-plugins

Triez les divs à l'aide de jQuery en fonction du contenu des éléments enfants - javascript, jquery, html, sorting, jquery-plugins

J'essaie de trier n quantité de divs dans ma page en fonction du contenu des autres éléments de la div.

Voici à quoi ressemble mon code html pour un bloc div (sur une page, il y en a plusieurs que je dois réorganiser / trier par prix ou par ordre alphabétique.

<div class="productBoxWrapper">
<li>
<img src="/images/my-product-image.jpg"></a>
<div class="product-info">
<h4>
<!-- I need to sort all divs by the Product Name -->
<a class="productTitleForSorting" href="product-page-link">Product Name</a><br>
</h4>
<div class="product-price">
<span id="listPrice">Suggested Retail: $XX.XX</span>
<span id="lowestPrice">As Low As:
<!-- I need to sort all divs by Product Price -->
<span class="productPriceForSorting">$XX.XX</span></span>
</div>
</div>
</li>
</div>

J'utilise ce plugin jQuery http://net.tutsplus.com/tutorials/javascript-ajax/sorting-values-with-javascript/ , jquery.datasource. Les exemples du plugin fonctionnent, mais je ne peux pas le faire fonctionner pour mon site.

Voici le javascript qui se déclenche lorsque l'utilisateursélectionne l'option de tri (Prix, Alpha) dans une liste déroulante. Il effectue parfois un tri aléatoire, mais ne fonctionne pas correctement. J'ai "peur que je n'appelle pas le bon div ici ou quelque chose ... Je suis nouveau sur jQuery donc toute aide grandement appréciée. VEUILLEZ VOIR LA PAGE DU PLUGIN POUR UTILISATION

change: function () {

var selectedOptionValue = jQuery("#sortThisCollectionBaby option:selected").val();

if (selectedOptionValue == "price-low-to-high")
{
// sort collection by price - low to high
jQuery(".productBoxWrapper").fadeTo("fast", 0.5);
var $this = jQuery(this);

jQuery(".productBoxWrapper").datasort({
datatype: "alpha",
sortElement: ".productPriceForSorting",
reverse: false
});
jQuery(".productBoxWrapper").fadeTo("fast", 1);
}

if (selectedOptionValue == "price-high-to-low")
{
// sort collection by price - high to low
jQuery(".productBoxWrapper").fadeTo("fast", 0.5);
var $this = jQuery(this);
jQuery(".productBoxWrapper").datasort({
datatype: "alpha",
sortElement: jQuery(".productPriceForSorting"),
reverse: true
});
jQuery(".productBoxWrapper").fadeTo("fast", 1);
}

if (selectedOptionValue == "alphabetically-a-to-z")
{
// sort collection alphabetically a to z
jQuery(".productBoxWrapper").fadeTo("fast", 0.5);
var $this = jQuery(this);
jQuery("#productTitleForSorting").datasort({
datatype: "alpha",
sortElement: ".productTitleForSorting",
reverse: false
});
jQuery(".productBoxWrapper").fadeTo("fast", 1);
}

if (selectedOptionValue == "alphabetically-z-to-a")
{
// sort collection alphabetically z to a
jQuery(".productBoxWrapper").fadeTo("fast", 0.5);
var $this = jQuery(this);
jQuery(".productBoxWrapper").datasort({
datatype: "alpha",
sortElement: ".productTitleForSorting",
reverse: false
});
jQuery(".productBoxWrapper").fadeTo("fast", 1);
}
}