使用索引来获得含有多行一个div（div的）

Question

我有一个div容器和专区内，我有一些行这样的值：

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

我想是让所有的在containerDiv1中的paramRow div，然后通过索引选择一个paramRow div。

$(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()); 
}); 

当我运行这段代码，我得到以下错误：

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

Answer 1

你有几个问题。首先，get()返回本机DOMElement，而不是一个jQuery对象。此外，你不能附加一个jQuery对象和一个字符串来形成一个选择器。

您应该使用eq()获取包含索引元素的jQuery对象，然后使用find()获取其中的input。试试这个：

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>