Question

我需要在JQuery中生成这样的数组：

one,two,three,four

从多个<span>子项中选择文字：

<div id="GROUP">
    <div><input value="somevalue"/><span>one</span></div>
    <div><input value="somevalue"/><span>two</span></div>
    <div><input value="somevalue"/><span>three</span></div>
    <div><input value="somevalue"/><span>four</span></div>
</div>

我试过这个：

$('html').find('#GROUP span').text();

但它加入所有文本而没有空格：

onetwothreefour

我需要用逗号分隔文本

解决

Working DEMO

Answer 1

尝试使用.map()和.get()来收集数组中的值，然后.join()该数组包含您想要的任何字符。

var text = $('#GROUP span').map(function(){ 
    return $(this).text(); 
}).get().join();

DEMO

旁注：默认情况下.join()会使用,加入文字。因此，在我们的案例中没有必要指定。

Answer 2

要将它们放入数组中，您可以使用：

var spantexts= [];
$("#GROUP span").each(function() { spantexts.push($(this).text()) });

<强> Demo

以逗号分隔值获取它们：

使用join：

console.log(spantexts.join(','));

或

var spantexts= "";
$("#GROUP span").each(function() { 
    if(spantexts!="")
    spantexts+=",";
    spantexts+=$(this).text(); 
 });

<强> Working Demo

Answer 3

作为次要更新，使用arrow functions：

进行更新

let joinedText = $('#GROUP span').map(
    (index, domElement) => $(domElement).text()
).get().join(',');

$('#RESULT').text(joinedText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Given:
<div id="GROUP">
    <div><input value="somevalue"/><span>one</span></div>
    <div><input value="somevalue"/><span>two</span></div>
    <div><input value="somevalue"/><span>three</span></div>
    <div><input value="somevalue"/><span>four</span></div>
</div>

Result:
<div id="RESULT"></div>

jquery - 来自选定子项的数组跨越以逗号分隔的文本

解决

3 个答案:

DEMO