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

如果由于性能原因需要进一步缩小选择器，可以使用以下内容：

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

这将成为：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

请参阅代码段。

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>

问候timotheus

Answer 3

使用Jquery

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

Answer 4

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

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

$('.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 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();
};

这样的东西？

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

6 个答案: