在jquery-ui按钮集中获取第n个按钮

Question

Is there some way to get the nth button in a jquery-ui buttonset?

 $( "#radio" ).buttonset(); 

 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div id="radio"> <input type="radio" id="sizzle" name="project"> <label for="sizzle">Sizzle</label> <input type="radio" id="qunit" name="project" checked="checked"> <label for="qunit">QUnit</label> <input type="radio" id="color" name="project"> <label for="color">Color</label> </div> 

I can select button qunit using its id selector.

But is there any way to select say the 2nd button in this set?

Answer 1

There are multiple ways you can select it in jQuery

$("#radio input[type=radio]").eq(1)

OR

$("#radio input[type=radio]").get(1)

OR

$("#radio input[type=radio]:eq(1)")

Answer 2

You can alway use jquery selectors like :eq :

 $("#radio :radio:eq(1)"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div id="radio"> <input type="radio" id="sizzle" name="project"> <label for="sizzle">Sizzle</label> <input type="radio" id="qunit" name="project" checked="checked"> <label for="qunit">QUnit</label> <input type="radio" id="color" name="project"> <label for="color">Color</label> </div> 

Alternative:

$("#radio :radio:nth-child(1)");

Answer 3

var n = 2;
var nthButton = $( "#radio input[type='radio']" ).buttonset().eq(n);

Adding input[type='radio'] selects the radio buttons themselves instead of the container div, eq(n) selects only the nth button.