如何更改jQuery选择器返回的元素（单选按钮）的顺序？

Question

I have a table with radio buttons.

In a jQuery collection, as c = $('input[name=mybuttons]') , I get them by rows, so that c[0] is the one in the top left cell.

How do I change this order, so that, say, c[0] be some another cell, or arrow keys go, say, by columns and not by rows; so that tab brings to some specific button rather than top left, and so that right arrow traverse the buttons in some specific order and not left-to-right?

For checkboxes and tab key, I achieve this with tabindex . How to achieve a similar effect for radio buttons and the right key: specify in HTML in what order the right key should traverse them?

Fiddle: http://jsfiddle.net/2u30u7fp/3/ The tab key does iterate in the desired order, but the right and left keys don't.

Answer 1

您可以使用下划线进行此操作，因为一旦获得c ，您基本上就拥有一个元素列表。

var sortedC = _.sortBy(c, function (elem) { return elem.propertyToSort; });

Answer 2

Here you are: use .insertBefore() or .insertAfter() . In my example, if you choose a radio button, that button will go to first in the group.

 $(document).on("change", "input[name='sex']", function() { var index = $("input[name='sex']").index($(this)); console.log(index); if (index != 0) { $(this).parent('div').insertBefore("div:first"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="radio" name="sex" value="male">Male</div> <div> <input type="radio" name="sex" value="female">Female</div> 

Hope this helps.