Use an index to get the value in a div containing multiple rows (divs)

Question

I have a container div and within that div I have some rows like this:

<div id="containerDiv1">
    <div class="paramRow">
        <input type="text" value="Foo" id="param1" />
    </div>
    <div class="paramRow">
        <input type="text" value="Bar" id="param2" />
    </div>
</div>

What I want is to get all the paramRow divs within the containerDiv1 and then select a paramRow div by its index.

$(function(){
    var containerDiv = $('#containerDiv1');
    var paramRows = containerDiv.find('.paramRow');

    // Below should output "Foo"
    alert($(paramRows.get(0) + ' #param1').val());

    // Below should output "Bar"
    alert($(paramRows.get(1) + ' #param2').val());
});

When I run this code, I get the following error:

Uncaught error: Syntax error, unrecognized expression: [object HTMLDivElement] #param1

Answer 1

You have a couple of issues. Firstly, get() returns a native DOMElement, not a jQuery object. Also, you can't append a jQuery object and a string to form a selector.

You should use eq() to get the jQuery object containing an element by index, then find() to get the input within it. Try this:

 var $containerDiv = $('#containerDiv1'); var $paramRows = $containerDiv.find('.paramRow'); // Below should output "Foo" alert($paramRows.eq(0).find('#param1').val()); // Below should output "Bar" alert($paramRows.eq(1).find('#param2').val()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="containerDiv1"> <div class="paramRow"> <input type="text" value="Foo" id="param1" /> </div> <div class="paramRow"> <input type="text" value="Bar" id="param2" /> </div> </div>