I have following html:

 <div id="buildyourform">

    <div class="fieldwrapper" id="field1">
        <input type="text" placeholder="Co-Author Name" class="fieldname m-wrap medium">
        <input type="text" placeholder="Co-Author Affiliation/Organization" class="fieldtype m-wrap medium">
    </div>
    <div class="fieldwrapper" id="field2">
        <input type="text" placeholder="Co-Author Name" class="fieldname m-wrap medium">
        <input type="text" placeholder="Co-Author Affiliation/Organization" class="fieldtype m-wrap medium">
    </div>

</div>

I want to get value of input boxes from each of the div of buildyourform

<script>
    $('#buildyourform > div:nth-child(i) > input.fieldname').val()
</script>

I tried above code but it's not working please help.

I have following html:

 <div id="buildyourform">

    <div class="fieldwrapper" id="field1">
        <input type="text" placeholder="Co-Author Name" class="fieldname m-wrap medium">
        <input type="text" placeholder="Co-Author Affiliation/Organization" class="fieldtype m-wrap medium">
    </div>
    <div class="fieldwrapper" id="field2">
        <input type="text" placeholder="Co-Author Name" class="fieldname m-wrap medium">
        <input type="text" placeholder="Co-Author Affiliation/Organization" class="fieldtype m-wrap medium">
    </div>

</div>

I want to get value of input boxes from each of the div of buildyourform

<script>
    $('#buildyourform > div:nth-child(i) > input.fieldname').val()
</script>

I tried above code but it's not working please help.

• javascript
• jquery
• css

6 Answers 6

You can simply use :eq() like following.

var first = $('.fieldname:eq(0)').val()
var second = $('.fieldname:eq(1)').val()

You can also use this

$(".fieldname:nth-child(1)") $(".fieldname:nth-child(2)")

Taken from the JQuery Docs:

jQuery( ":nth-child(index/even/odd/equation)" )

The :nth-child selector will get parsed. If you use an index (integer) then it will return you all the elements of the set that are the nth child of their parent. So depending on the set it will return 0-n elements.

jQuery( ":eq(index)" )

The :eq selector expects an index (integer) and will return the element at the given index (in the set) and only this one.

The big difference between :nth-child and :eq:

The :nth-child selector will return all elements (of the set) that are the nth child of their parent whereas :eq will return you only 1 element that is at the given index in the set!

I know this is not exactly what the OP meant, but this is how I would initially interpret the question he asked and I don't understand why jQuery (to my knowledge) doesn't provide something like this (tho maybe I'm just not familiar enough with jQuery)

function nth(element) {
    var parent = element.parentElement;
    if(element === parent || parent === null) return 0;
    else {
        var children = parent.getElementsByTagName(element.tagName);
        for(var i=0;i<children.length;i++) if(children[i] === element) return (i+1);
    }
    return false;
}

Your script only get the value of the first input.
If you want to get the value of each input, you can use the $.each() function.

$('#buildyourform input').each(function(){
  var value = $(this).val();
  console.log(value);
});

At first I was trying my solution with nth child property of jquery but I got my answer using eq property:

$('#buildyourform > div:eq(' + (i-1) + ') > input.fieldname').val()
$('#buildyourform > div:eq(' + (i-1) + ') > input.fieldtype').val()

this code will run in for loop. where "i" is the value of for loop.