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

【问题标题】：Get nth button in a jquery-ui buttonset获取 jquery-ui 按钮集中的第 n 个按钮
【发布时间】：2015-10-15 16:22:25
【问题描述】：

有没有办法在 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>

我可以使用它的 id 选择器选择按钮 qunit。

但是有什么方法可以选择这个集合中的第二个按钮吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-button

【解决方案1】：

在 jQuery 中有多种方法可以选择它

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

或

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

或

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

【讨论】：

【解决方案2】：

你总是可以使用像:eq这样的jquery选择器：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：