按字母顺序对输入单选框进行排序

Question

我正在尝试按字母顺序对这些项目进行排序，但它并未对所有项目进行排序。你能告诉我为什么它不工作吗？ 这是我的小提琴示例。

jsFiddle Link

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

    fieldItem.each(function(i) {
        $(this).after(sorted.eq(i));
    });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 1

问题是你从不打电话给handleAlphaOrder，只是声明它。

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

  fieldItem.each(function(i) {
    $(this).after(sorted.eq(i));
  });
};
handleAlphaOrder(); // Call function now

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

您的排序正常，但您没有看到结果，因为您错误地将field-item添加回DOM。尝试在所有field-item div（在下面的示例中为radioGroup）周围添加一个包装，然后附加到它而不是尝试覆盖现有的div。覆盖它们是造成问题的原因。

此外，在比较文字而不是localeCompare或>时，您应该使用<。 String.prototype.localeCompare()

尝试一下：

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>