按字母顺序对输入单选框进行排序
我想按字母顺序对这些项目进行排序,但并未按照它的顺序排列所有项目。你能给我一些想法,为什么它不工作? 这是我的小提琴示例。按字母顺序对输入单选框进行排序
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 & 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 & 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>
你的排序工作,但你没有看到的结果,因为你是不正确的附加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 & 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 & 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>
问题是,你永远不会调用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 & 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 & 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>
看起来他的排序也不正确,但这是肯定的主要问题。 – Tricky12
是的,它不是按字母顺序排序..我不知道为什么 – divisionkiller
你的sort()函数不应该返回比较结果(或任何其他布尔结果)。根据字符串的值,它应该返回负值,零或正值。经常使用[localeCompare]的结果(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)。 –
拨弄不工作 –
拨弄你是否意识到计算器具有相同的能力,为的jsfiddle内置固定 – divisionkiller
?使用snipplets按钮。 – epascarello