用逗號填充表單字段分隔在無序列表字符串的onclick與jQuery/JavaScript的

Question

我有一個地址查找系統返回的地址在一個無序列表，像這樣：

<p>Please select your address from the list below</p> 
<div id="selectAddress"> 
    <ul> 
     <li>HNO 412,addressLine2,addressLine8</li> 
     <li>HNO 413,addressLine2,addressLine8</li> 
     <li>HNO 414,addressLine2,addressLine8</li> 
    </ul> 
</div> 

當有人點擊包含地址的李我使用folloqing jQuery來分割它並填充下面的表單域。

var $customerAddress = $("form#detailsForm input[name*='customerAddress']"); 

    $("div#selectAddress ul li").click(function(){ 

    $(this).removeClass("addressHover"); 

    $("li.addressClick").removeClass("addressClick"); 

    $(this).addClass("addressClick"); 

    var $splitAddress = $(this).text().split(","); 

    $($customerAddress).closest("tr").removeClass("hide"); 

    $($customerAddress).each(function(){ 
     var $inputCount = $(this).index($customerAddress); 
     $(this).val($splitAddress[$inputCount]); 
    });  

    $.cookies.set('cpqbAddressInputs', 'visible'); 

}); 

表單字段：

<tr>      
<th> 
    <label for="customerAddressLine1">Address&nbsp;*</label> 
</th> 
<td colspan="3"> 
    <input type="text" name="customerAddressLine1" maxlength="40" value="" id="customerAddressLine1" class="text" /> 
</td> 

<tr> 
    <th> 
     <label for="customerAddressLine2" class="offscreen">Address line 2</label> 
    </th> 
    <td colspan="3"> 
     <input type="text" name="customerAddressLine2" maxlength="40" value="" id="customerAddressLine2" class="text" /> 
    </td> 
</tr> 
<tr> 
    <th> 
     <label for="customerAddressLine3" class="offscreen">Address line 3</label> 
    </th> 
    <td colspan="3"> 
     <input type="text" name="customerAddressLine3" maxlength="40" value="" id="customerAddressLine3" class="text" /> 
    </td> 
</tr> 

但是似乎只填充地址的第一線，而不是行二，三。

我可以很容易地做到這一點，但我想抽象它，以便它可以擴大到迎合任何數量的地址線。

Answer 1

出於某種原因，它不喜歡這一行：當我改變這個

var $inputCount = $(this).index($customerAddress); 

：

var $inputCount = $(this).index("form#detailsForm input[name*='customerAddress']"); 

它工作正常:)