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

Question

有什么方法可以获取 jquery-ui 按钮集中的第 n 个按钮吗？

$( "#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>

我可以 select 按钮 qunit 使用它的 id select 或者。

但是有没有办法select说出这组中的第二个按钮？

Answer 1

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

添加 input[type='radio'] 选择单选按钮本身而不是容器 div，eq(n) 仅选择第 n 个按钮。

Answer 2

您可以通过多种方式 select jQuery

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

或

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

或

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

Answer 3

您始终可以使用 jquery 选择器，例如 :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>

选择：

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