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

阅读.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>

Answer 2

对于这种情况，使用.map()是一个很好的解决方案。

它会自动为您构建一个Array（实际上是一个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/

如何在jquery中将列表项添加到文本框？

2 个答案: