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

Question

我必须到达div（class = form-group）中的第一个输入以使第一个输入成为必需。

<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>

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

Answer 1

如果出于性能原因想要进一步缩小选择器范围，则可以使用以下方法：

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

这将变成：

 $(function() { $('#inputMail1 ').click(function(){ $('div.form-group > div:first > div > input:first').focus(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <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="eg example@url.com"/> <span class="common-sprite disNone sign-up-cross first clone"></span> </div> </div> </div> 

Answer 2

请参阅代码段。

最接近的 =搜索第一个匹配的父级。

兄弟姐妹 =搜索兄弟姐妹元素。

first =获取第一个匹配元素。

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

val =获取输入元素的值。

 (function($) { $('body').on('click', '.email', function() { var firstname = $(this).closest('.col-md-4').siblings().first().find('.firstName').val(); alert(firstname); }); })(jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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="eg example@url.com" /> <span class="common-sprite disNone sign-up-cross first clone"></span> </div> </div> </div> 

timotheus的问候

Answer 3

用jQuery

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

Answer 4

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

如果要在单击第三个.form-text-field元素时获取第一个input元素：

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

这里的例子

---

或者，您可以通过id而不是.eq(2)选择元素：

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

这里的例子

Answer 5

您可以使用它

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

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

});

Answer 6

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

像这样吗？