CODEWITHSUNDEEP
jqueryfrontend
Diego
Diego

Reputation: 304

How can I find an input element of multple classes in Jquery

I know that for multple classes I can look for $(".form-group.text-center") my question is how can I find an input element that is inside of the conjuction of these 2 classes

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

Upvotes: 1

Views: 58

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

You can do:-

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

Demo example:-

$(document).ready(function(){
  $(".form-group.text-center input").on('mouseout',function(){
   alert($(this).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>

Note:- based on yout HTML structure you can go for these options also:-

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

Upvotes: 1

Tarek B
Tarek B

Reputation: 494

You can use $(".form-group.text-center > input") like below:

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

the > means the direct child

Upvotes: 1

SilverSurfer
SilverSurfer

Reputation: 4366

Use find() method: 

$(".form-group.text-center").find("input").addClass("border")
.border{
    border: 2px solid green;
}
<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>

Upvotes: 1

Related Questions