使用索引來獲得含有多行一個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>