0

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
Nihar Sarangi
  • 4,845
  • 8
  • 27
  • 32

3 Answers3

5

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)");
Alex Char
  • 32,879
  • 9
  • 49
  • 70
4

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)")
Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
1
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.

Goujon
  • 187
  • 5