Children of Many Parents jQuery Selector

Question

I am trying to select every first child of any parent with the class .Payment

Sample HTML :

<div class='payment'>
  <input id="payments_0_:date_paid" name="payments[0][:date_paid]" type="text" />
  <br>
  <input id="payments_0_:amount_paid" name="payments[0][:amount_paid]" type="text" />
</div>
<div class='payment'>
  <input id="payments_1_:date_paid" name="payments[0][:date_paid]" type="text" />
  <br>
  <input id="payments_1_:amount_paid" name="payments[0][:amount_paid]" type="text" />
</div>
<div class='payment'>
  <input id="payments_2_:date_paid" name="payments[0][:date_paid]" type="text" />
  <br>
  <input id="payments_2_:amount_paid" name="payments[0][:amount_paid]" type="text" />
</div>

How can I iterate through each .payment and validate whether the first child in each is under a certain quality?

This is my attempt :

$.each($(".payment"), function(key, value) { 
  alert( $("value input:first").val() ); 
});

But the trouble I am having here is using the var value in getting that attribute value()

Any ideas?

Answer 1

Try using $("input:first", value).val()

Answer 2

Instead of using $.each(), use .each() on the jQuery selection instead so you get access to $(this):

$('.payment').each(function(key) {
    alert($(this).find('input:first').val());
});

Answer 3

Since the inputs in question are a first child, you can target them in the original selector using the :first-child selector^(docs) , then use the native value property to get its value:

$('.payment > input:first-child').each(function() {
    alert(this.value);
});

It may be worthwhile to reduce them to a set of those that do not (or do) meet validation using the filter()^(docs) method or the not()^(docs) method.