獲取每個span類的值並將字符串輸入到輸入

Question

我有一個名爲'tag-label'的跨度中的值列表。我希望添加每個跨度的值並將它們插入到用逗號分隔的輸入字段中。

我已經設置了一個JSFiddle來顯示它。 http://jsfiddle.net/stefanselby/7wrg611k/

我的HTML：

<label for="TagsHolder">Keywords</label> 
<ul> 
    <li><span class="tag-label">test 1</span></li> 
    <li><span class="tag-label">test 2</span></li> 
    <li><span class="tag-label">test 3</span></li> 
</ul> 
<input type="text" id="TagsHolder" name="TagsHolder" value="" /> 
<button id="btn">Update</button> 
<p></p> 
<p>This is what I require</p> 
<input type="text" id="TagsHolder2" name="TagsHolder2" value="test 1,test 2,test 3" /> 

我的JavaScript（我在哪裏卡住）：

$(document).ready(function(){ 
    $("#btn").click(function(){ 
     $.each($('.tag-label'), function (index, value) { 
      $("#TagsHolder").val(index); 
     }); 
    }); 
}); 

Answer 1

您可以使用.map得到一個數組，然後再加入一個,

var values = $(".tag-label").map(function() { 
    return $(this).text(); 
}).get().join(","); 

$("#TagsHolder").val(values); 

小提琴：http://jsfiddle.net/7wrg611k/3/

Answer 2

您的方法有幾個問題。

index是當前元素的數組索引，而不是文本。

你的循環將替換值每遍，所以纔有了最後的值會因爲每個前次設置值可以看出將被替換

最好的辦法是創建一個數組，並加入該數組：

$("#btn4").click(function() { 
    var values = $('.tag-label').map(function() { 
     return $(this).text(); 
    }).get().join(); 
    $("#TagsHolder").val(values); 
}); 

DEMO