Javascript 选择器-如何选择div中的第一个输入？

我必须进入a div（class=formgroup）中的第一个输入，以使第一个输入成为必需的

<div class="form-group clearfix">
   <div class="col-md-2 col-md-offset-2">
       <div class="form-text-field first-name">
           <input type="text" id="firstName1" class="signup-input firstName" name="first[1]" placeholder="">
       </div>
   </div>
   <div class="col-md-2">
       <div class="form-text-field last-name">
           <input type="text" id="lastName1" class="signup-input lastName" name="last[1]" placeholder="optional">
       </div>
   </div>
   <div class="col-md-4">
       <div class="form-text-field email">
           <input type="text" data-index="1" id="inputMail1" class="signup-input text-value email" name="email[1]"  placeholder="e.g. example@url.com"/>
           <span class="common-sprite disNone sign-up-cross first clone"></span>
       </div>
   </div>
</div>

如何在单击第三个元素（电子邮件）时选择第一个输入（名字）？

使用Jquery

$('#inputMail1').click(function(){
$( "input" ).first().focus();
});

---

如果出于性能原因希望进一步缩小选择器的范围，可以使用以下选项：

$('div.form-group > div:first > div > input:first')

这将成为：

$（函数（）{
$（'#inputMail1'）。单击（函数（）{
$（'div.form-group>div:first>div>input:first'）.focus（）；
});
});


如何在单击第三个元素（电子邮件）时选择第一个输入（名字）

如果要在单击第三个
时获取第一个
输入
元素。表单文本字段
元素：

$('.form-group .form-text-field').eq(2).on('click', function () {
    $(this).closest('.form-group').find('.form-text-field:first input:first');
});



或者您可以通过
id
而不是
来选择元素。eq（2）
：

你可以使用它

$('.signup-input.email').on('click',function(){<-trigger on click

   $(this).closest('.clearfix').find('.firstName'); <- get firstname of this clearfix

});

$（'.signup input.email'）。在（'click'，function（）{上查看代码片段

=搜索第一个加工父对象

=搜索同级元素

=获取第一个匹配元素

=获取第一个匹配的子元素

=获取输入元素的值


（函数（$）{
$（'body'）。在（'click'，'email'，函数（）上{
var firstname=$（this）.closest（'.col-md-4'）.sides（）.first（）.find（'.firstname'）.val（）；
警报（名字）；
});
})（jQuery）；


有人这样想吗？
你试过什么吗？“我如何在单击第三个元素（电子邮件）时选择第一个输入（名字）？“当你单击第三个元素（电子邮件）时，你想对第一个输入做什么？”单击第三个元素（电子邮件）…您在
div
和
input
上有
.email
。您指的是哪个元素？使用id=“firstName1”？不确定此代码之前没有输入，并且回答不完整没有点击$（'#inputMail1'）的触发。点击（函数（）{$（“input”）.first（）.focus（）；）；我有多个div，比如上面的一个……它怎么知道在相关div中选择第一个输入？这是错误的，他想要选择这个clearfix的firstName而不是first inpage@BenjaminPoignant真的，我认为它是正确的。@hutchonoid，
$（'div.form-group>div:first>div:first>input:first'）
？？@BenjaminPoignant运行代码时，虽然标记已经给出。我明白你的意思。@saritrotshild你能用你拥有的其他结构更新这个问题吗？我不确定我是否理解。我希望你引用jQuery方法。但我仍然更喜欢使用CSSSelector的解决方案。也就是说，。作为“bette”r'（向上投票）答案。注意：这不使用或不需要jQuery库..（另外，我会使用
addEventListener
）…和
querySelector
如果只有一个处理程序，则不必使用addEventListener/attachEvent，但如果有多个处理程序，则完全正确！您不知道是否只有一个处理程序..用户代理可能会使用将addEventListener添加到输入的扩展来自动完成..或其他..这就是不管怎样，这是一个新概念。。
$('.signup-input.email').on('click',function(){<-trigger on click

   $(this).closest('.clearfix').find('.firstName'); <- get firstname of this clearfix

});

document.getElementById('inputMail1').parentNode.parentNode.onclick = function(){
  document.getElementById('firstName1').focus();
};