[Solved] Sorting input radio boxes alphabetically [closed]

by


Your sort is working, but you are not seeing the results because you are incorrectly appending your field-items back to your DOM. Try adding a wrapper around all of your field-item divs (radioGroup in the example below) and then append to it instead of trying to overlay the existing divs. Overlaying them is what is causing you problems.

Also, you should probably use localeCompare when comparing text instead of > or <. String.prototype.localeCompare()

Give this a try:

handleAlphaOrder = function() {
  var fieldItem = $('.field_item');
  var sorted = $(fieldItem.toArray().sort(function(a, b) {
    //return $(a).find('label').text() > $(b).find('label').text()
    return $(a).find('label').text().localeCompare($(b).find('label').text());
  }));

  fieldItem.each(function(i) {
    //$(this).after(sorted.eq(i));
    $('#radioGroup').append(sorted.eq(i));
  });
};

handleAlphaOrder();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="radioGroup">
    <div class="field_item">
        <input type="radio" name="category" value="1" id="productspage-category-women">
        <label for="productspage-category-women">Women</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="1-2" id="productspage-category-womenbags">
        <label for="productspage-category-womenbags">Women's bags</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="1-4" id="productspage-category-jewellery">
        <label for="productspage-category-jewellery">Jewellery</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="2" id="productspage-category-men">
        <label for="productspage-category-men">Men</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="2-2" id="productspage-category-menbags">
        <label for="productspage-category-menbags">Men's bags</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="2-4" id="productspage-category-menshoes">
        <label for="productspage-category-menshoes">Men's shoes</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="3-1" id="productspage-category-baby">
        <label for="productspage-category-baby">Baby</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="3-3" id="productspage-category-girl">
        <label for="productspage-category-girl">Girl</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4" id="productspage-category-home">
        <label for="productspage-category-home">Home</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-2" id="productspage-category-bed">
        <label for="productspage-category-bed">Bed</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-5" id="productspage-category-kitchen">
        <label for="productspage-category-kitchen">Kitchen</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-7" id="productspage-category-lighting">
        <label for="productspage-category-lighting">Lighting</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-10" id="productspage-category-outdoor">
        <label for="productspage-category-outdoor">Outdoor</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="5-1" id="productspage-category-haircare">
        <label for="productspage-category-haircare">Hair care</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="5-3" id="productspage-category-mengrooming">
        <label for="productspage-category-mengrooming">Men's grooming</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="5-6" id="productspage-category-skincare">
        <label for="productspage-category-skincare">Skincare</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6" id="productspage-category-lifestyle">
        <label for="productspage-category-lifestyle">Lifestyle</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6-4" id="productspage-category-foodsupplements">
        <label for="productspage-category-foodsupplements">Food supplements</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6-5" id="productspage-category-treatments">
        <label for="productspage-category-treatments">Treatments</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6-6" id="productspage-category-electronics">
        <label for="productspage-category-electronics">Electronics</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="" id="productspage-category-all">
        <label for="productspage-category-all">All</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="1-1" id="productspage-category-womenaccessories">
        <label for="productspage-category-womenaccessories">Women's accessories</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="1-3" id="productspage-category-womenclothing">
        <label for="productspage-category-womenclothing">Women's clothing</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="1-5" id="productspage-category-womenshoes">
        <label for="productspage-category-womenshoes">Women's shoes</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="2-1" id="productspage-category-menaccessories">
        <label for="productspage-category-menaccessories">Men's accessories</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="2-3" id="productspage-category-menclothing">
        <label for="productspage-category-menclothing">Men's clothing</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="3" id="productspage-category-kids">
        <label for="productspage-category-kids">Kids</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="3-2" id="productspage-category-boy">
        <label for="productspage-category-boy">Boy</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="3-4" id="productspage-category-toys">
        <label for="productspage-category-toys">Toys</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-1" id="productspage-category-bath">
        <label for="productspage-category-bath">Bath</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-3" id="productspage-category-childrenhome">
        <label for="productspage-category-childrenhome">Children's home</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-6" id="productspage-category-furniture">
        <label for="productspage-category-furniture">Furniture</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="4-11" id="productspage-category-decor">
        <label for="productspage-category-decor">Decor</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="5" id="productspage-category-beauty">
        <label for="productspage-category-beauty">Beauty</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="5-2" id="productspage-category-makeup">
        <label for="productspage-category-makeup">Makeup</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="5-5" id="productspage-category-perfume">
        <label for="productspage-category-perfume">Perfume</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="5-8" id="productspage-category-healthbody">
        <label for="productspage-category-healthbody">Health &amp; body</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6-1" id="productspage-category-fooddrinks">
        <label for="productspage-category-fooddrinks">Food &amp; drinks</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6-2" id="productspage-category-yoga">
        <label for="productspage-category-yoga">Yoga</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6-3" id="productspage-category-gadgets">
        <label for="productspage-category-gadgets">Gadgets</label>
    </div>
    <div class="field_item">
        <input type="radio" name="category" value="6-7" id="productspage-category-fitness">
        <label for="productspage-category-fitness">Fitness</label>
    </div>
</div>

0

solved Sorting input radio boxes alphabetically [closed]