Question

我知道对于多类课程，我可以寻找$（＆＃34; .form-group.text-center＆＃34;）我的问题是如何找到这两个内容的输入元素类

<div class="form-group text-center">
    <label class="label-text no-padding"></label>
    <input class="bg-color form-control mfa" placeholder="Answer" type="TEXT">
</div>

Answer 1

使用find()方法：

＆＃13;

$(".form-group.text-center").find("input").addClass("border")

＆＃13;

.border{
    border: 2px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group text-center">
  <label class="label-text no-padding"></label>
  <input class="bg-color form-control mfa" placeholder="Answer" type="TEXT">
</div>

＆＃13;

Answer 2

你可以这样做： -

$(".form-group.text-center input")

演示示例： -

＆＃13;

$(document).ready(function(){
  $(".form-group.text-center input").on('mouseout',function(){
   alert($(this).val());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group text-center">
  <label class="label-text no-padding"></label>
  <input class="bg-color form-control mfa" placeholder="Answer" type="TEXT">

</div>

＆＃13;

注意： - 根据您的HTML结构，您还可以选择以下选项： -

$(".form-group.text-center .mfa")
$(".form-group.text-center input[type='text']")
$(".form-group.text-center input[type=text]")

Answer 3

您可以使用下面的$(".form-group.text-center > input")：

$(document).ready(function(){
  $(".form-group.text-center > input").on('mouseout',function(){
  input = $(this);// $(this) means your selected object -the input-
  input.val("i am an input !!");
   alert(input.val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group text-center">
  <label class="label-text no-padding"></label>
  <input class="bg-color form-control mfa" placeholder="Answer" type="TEXT">

</div>

>表示直接孩子

如何在Jquery中找到多类的输入元素

3 个答案: