使用jQuery获取Div中某些类型的元素

Question

我有一个动态生成的HTML页面。 HTML的粗略版本如下所示：

<div id="brotherDiv">
  <input type="radio" name="myOtherGroup" value="A" />
  <input type="radio" name="myOtherGroup" value="B" />
</div>
<div id="myDiv">
  <input type="radio" name="myGroup" value="1"></input>
  <input type="text" id="myText" name="myText"></input><br />

  <input type="radio" name="myGroup" value="2"></input>
  <input type="text" id="myText2" name="myText2"></input><br />

  <input type="radio" name="myGroup" value="3"></input><br />

  <input type="radio" name="myGroup" value="4"></input>
</div>
<div id="sisterDiv"></div>

我正在尝试

1. 获取myDiv
中的所有单选按钮
2. 在＃1。
的结果中获取所选单选按钮的索引

有没有办法在jQuery中进行这种类型的查询？如果是这样，怎么样？目前，我有

var rbs = $("input[name='myGroup']");

我觉得我很亲密。

Answer 1

我建议：

var rbs = $("#myDiv input[name='myGroup']:checked"),
    index = rbs.index(),
    // amongst its siblings, or:
    inputIndex = rbs.index('input[name="myGroup"]');
    // amongst other input elements of the same group

参考文献：

• CSS：
  • Attribute presence and value selectors。
  • :checked pseudo-class。
• jQuery的：
  • index()。

Answer 2

#myDiv中的所有单选按钮：

var rbs = $('#myDiv :radio');

经过：

var checkedIndex = rbs.filter(':checked').index(':radio');

Answer 3

 var rbs = $('#myDiv input[type="radio"]'); // Get radio buttons
 var result = $('#myDiv input[type="radio"]:checked') // Get checked radio buttons

Answer 4

回答＃1：

var radios = $('#myDiv input[type="radio"][name="myGroup"]');

回答＃2：

var checkedRadios = radios.index( $('#myDiv input[type="radio"][name="myGroup"]:checked') );

Answer 5

尝试

  var rbs = $("#myDiv [type=radio]") // #1
  , rbschecked = null; // #2 , pending change event
    rbs.change(function(e) {
      rbschecked = rbs.index(e.target) // #2
  })

＆＃13;

＆＃13;

      var rbs = $("#myDiv [type=radio]")
      , rbschecked = null;
        rbs.change(function(e) {
          rbschecked = rbs.index(e.target);
          e.target.dataset.i = rbschecked;
          console.log(rbschecked)
        })

＆＃13;

#myDiv input:checked:after  {
  position : relative;
  content : attr(data-i);
  left : 12px;
  top : -2px;
  color : blue;
  font-family : arial;
  font-style : italic;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="brotherDiv">
  <input type="radio" name="myOtherGroup" value="A" />
  <input type="radio" name="myOtherGroup" value="B" />
</div>
<div id="myDiv">
  <input type="radio" name="myGroup" value="1"></input>
  <input type="text" id="myText" name="myText"></input><br />

  <input type="radio" name="myGroup" value="2"></input>
  <input type="text" id="myText2" name="myText2"></input><br />

  <input type="radio" name="myGroup" value="3"></input><br />

  <input type="radio" name="myGroup" value="4"></input>
</div>
<div id="sisterDiv"></div>

＆＃13;

＆＃13;

＆＃13;