选择器 - 如何选择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> 

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

Answer 1

与jQuery

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

Answer 2

如果您想进一步下降缩小选择性能方面的原因，你可以使用以下命令：

$('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="e.g. example@url.com"/> 
 
      <span class="common-sprite disNone sign-up-cross first clone"></span> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

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

如果你想获得第三.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'); 
}); 

Example Here

---

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

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

Example Here

Answer 4

你中央社使用它

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

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

}); 

Answer 5

看到代码段。

closest =搜索第一个加工父项。

siblings =搜索兄弟元素。

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="e.g. example@url.com" /> 
 
     <span class="common-sprite disNone sign-up-cross first clone"></span> 
 
    </div> 
 
    </div> 
 
</div>

问候提摩太

Answer 6

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

Somethink这样吗？