为什么 JavaScript push() 方法不在数组元素之间添加逗号？

Question

我正在尝试使用jQuery each()和JavaScript push()方法动态添加数组元素。当我在使用alert()添加元素后显示数组时，每个元素之间都有一个逗号，但是当我使用jQuery html()方法在网页上显示我的数组元素时，两者之间没有逗号，数组元素显示为长字符串。我不明白为什么会这样？那么如何在页面上显示每个数组元素时在每个数组元素之间添加逗号(最后一个之后的逗号除外)？

$(document).ready(function() {
var div_array = new Array();
$("#btn").click(function() {
$("#wrapper .selected").each(function() {
div_array.push($(this).children("p").text());
});
alert(div_array);
$("#response").html(div_array);
});
});

#wrapper {
width: 700px;
margin: 50px auto;
}
.mydiv {
border: 1px solid red;
width: 100px;
height: 50px;
float: left;
margin: 15px;
text-align: center;
}
.selected {
background-color: red;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="mydiv selected">
<p>Div 1</p>
</div>
<div class="mydiv">
<p>Div 2</p>
</div>
<div class="mydiv selected">
<p>Div 3</p>
</div>
<div class="mydiv selected">
<p>Div 4</p>
</div>
<div class="mydiv">
<p>Div 5</p>
</div>
<div style="clear:both;"></div>
<input type="button" id="btn" value="Get Selected Div" />
<div id="response"></div>
</div>

Answer 1

改用$("#response").html(div_array.join(','));

var div_array = new Array();
$("#btn").click(function() {
$("#wrapper .selected").each(function() {
div_array.push($(this).children("p").text());
});
alert(div_array);
$("#response").html(div_array.join(','));
});

#wrapper {
width: 700px;
margin: 50px auto;
}
.mydiv {
border: 1px solid red;
width: 100px;
height: 50px;
float: left;
margin: 15px;
text-align: center;
}
.selected {
background-color: red;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="mydiv selected">
<p>Div 1</p>
</div>
<div class="mydiv">
<p>Div 2</p>
</div>
<div class="mydiv selected">
<p>Div 3</p>
</div>
<div class="mydiv selected">
<p>Div 4</p>
</div>
<div class="mydiv">
<p>Div 5</p>
</div>
<div style="clear:both;"></div>
<input type="button" id="btn" value="Get Selected Div" />
<div id="response"></div>
</div>

Answer 2

在页面上显示数组元素时，您需要将数组元素.join()为字符串。.join()方法接受字符串作为参数来分隔数组的每一对相邻元素。如果没有值传递给.join()，则默认值为,，因此可以只使用.join()。

因此，您可以使用：

$("#response").html(div_array.join());

结果，

Item1,Item2,Item3

或者使用", "作为.join()参数在每个元素之间放置逗号和空格：

Item1, Item2, Item3

$(document).ready(function() {
var div_array = new Array();
$("#btn").click(function() {
$("#wrapper .selected").each(function() {
div_array.push($(this).children("p").text());
});
$("#response").html(div_array.join(", "));
});
});

#wrapper {
width: 700px;
margin: 50px auto;
}
.mydiv {
border: 1px solid red;
width: 100px;
height: 50px;
float: left;
margin: 15px;
text-align: center;
}
.selected {
background-color: red;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="mydiv selected">
<p>Div 1</p>
</div>
<div class="mydiv">
<p>Div 2</p>
</div>
<div class="mydiv selected">
<p>Div 3</p>
</div>
<div class="mydiv selected">
<p>Div 4</p>
</div>
<div class="mydiv">
<p>Div 5</p>
</div>
<div style="clear:both;"></div>
<input type="button" id="btn" value="Get Selected Div" />
<div id="response"></div>
</div>

Answer 3

alert在数组上调用toString，添加逗号。 jQueryhtml函数不这样做，而是将数组中的项追加为文本节点。 即数组中的每个字符串将作为文本节点附加到响应div。

如果您尝试使用text而不是html它将打印出数组，如您在警报中看到的那样，因为这会将元素的textContent设置为数组(这反过来会调用toString)。

var div_array = new Array();
$("#btn").click(function() {
$("#wrapper .selected").each(function() {
div_array.push($(this).children("p").text());
});
alert(div_array);
$("#response").text(div_array);
});

#wrapper {
width: 700px;
margin: 50px auto;
}
.mydiv {
border: 1px solid red;
width: 100px;
height: 50px;
float: left;
margin: 15px;
text-align: center;
}
.selected {
background-color: red;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="mydiv selected">
<p>Div 1</p>
</div>
<div class="mydiv">
<p>Div 2</p>
</div>
<div class="mydiv selected">
<p>Div 3</p>
</div>
<div class="mydiv selected">
<p>Div 4</p>
</div>
<div class="mydiv">
<p>Div 5</p>
</div>
<div style="clear:both;"></div>
<input type="button" id="btn" value="Get Selected Div" />
<div id="response"></div>
</div>

Answer 4

$(document).ready(function() {
var div_array = new Array();
$("#btn").click(function() {
$("#wrapper .selected").each(function() {
div_array.push($(this).children("p").text());
});
alert(div_array);
$("#response").text(div_array);
});
});

#wrapper {
width: 700px;
margin: 50px auto;
}
.mydiv {
border: 1px solid red;
width: 100px;
height: 50px;
float: left;
margin: 15px;
text-align: center;
}
.selected {
background-color: red;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="mydiv selected">
<p>Div 1</p>
</div>
<div class="mydiv">
<p>Div 2</p>
</div>
<div class="mydiv selected">
<p>Div 3</p>
</div>
<div class="mydiv selected">
<p>Div 4</p>
</div>
<div class="mydiv">
<p>Div 5</p>
</div>
<div style="clear:both;"></div>
<input type="button" id="btn" value="Get Selected Div" />
<div id="response"></div>
</div>