如何將列表項添加到jQuery中的文本框？

Question

我有一個列表

<ul id="list"> 
<li>list1</li> 
<li>list2</li> 
<li>list3</li> 
</ul> 

和文本框

<input type="text" name="textfield" id="tb" value="" /> 

當我點擊一個按鈕，所有的列表項應該是這樣的 list1 list2 list3 我想這樣做的jQuery的文本框中。請幫幫我。

Answer 1

使用.map()是這種情況的最佳解決方案。

它爲你自動構建一個數組（實際上是一個jQuery對象）。

然後，您使用.get()來抓取數組，然後使用.join()將元素連接到一個字符串中。

$('#button').click(function() { 

    var result = $('#list li').map(function() { // .map() will iterate over the <li> elements. 
     return $(this).text(); // Each iteration will return the text value in the element 
    }).get().join(" ");   // Grab the Array, and join with a blank space 

    $('#tb').val(result); // Set the value of your input 
}); 

---

相關jQuery的文檔：

• .map() - http://api.jquery.com/map/
• .get() - http://api.jquery.com/get/

Answer 2

閱讀.each() jQuery的方法對於理解下面的代碼片段：

<input type="button" id="populate" value="Populate" /> 

<script type='text/javascript'> 
    $('#populate').click(
     function() { 
      $('#tb').val(''); 

      var list_items = new Array; 
      $('#list li').each(
       function(i, list_item) { 
        list_items.push(list_item.innerHTML); 
       } 
      ); 

      $('#tb').val(list_items.join(' ')); 
     } 
    ); 
</script>