javascript - 当用户单击链接时，如何聚焦第一个字段并选择其内容？

Question

HTML：

<div class="control-group">
    <label class="control-label" for="some-id-1"><a href="http://example.com/some-id-1" target="_blank">Text1</a></label>
    <div class="controls">
        <input type="text" id="some-id-1" name="some-id-1"><br>
        <input type="text" id="some-id-11" name="some-id-11"><br>
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="some-id-2"><a href="http://example.com/some-id-2" target="_blank">Text2</a></label>
    <div class="controls">
        <input type="text" id="some-id-2" name="some-id-2"><br>
        <input type="text" id="some-id-22" name="some-id-22"><br>
    </div>
</div>

JavaScript：

$(".control-label a").click(function(){
   $(this).parent().next().find('input').focus();
});

演示

它选择控制组中的最后一个字段。我应该如何选择第一个？

Answer 1

在方法中使用:first选择器find()：

$(this).parent().next().find('input:first').focus();

JS 小提琴演示。

Answer 2

.find('input:first-child')应该为您解决问题。

尽管必须注意的是，for=""属性label 应该立即执行该确切的行为。