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

时间：2017-12-23 08:27:20

标签： javascript jquery arrays

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

＆＃13;
＆＃13; 
$(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);
  });
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

使用SELECT Z.ID as 'ID', (CASE WHEN Z.isProductA > 0 THEN 'Yes' ELSE 'No' END) as 'A', (CASE WHEN Z.isProductB > 0 THEN 'Yes' ELSE 'No' END) as 'B', (CASE WHEN Z.isProductC > 0 THEN 'Yes' ELSE 'No' END) as 'C', (CASE WHEN Z.isProductD > 0 THEN 'Yes' ELSE 'No' END) as 'D', (CASE WHEN Z.isProductE > 0 THEN 'Yes' ELSE 'No' END) as 'E', (CASE WHEN Z.isProductF > 0 THEN 'Yes' ELSE 'No' END) as 'F' FROM ( SELECT A.ID, SUM(b.isProductA) as total_A, SUM(b.isProductB) as total_B, SUM(b.isProductC) as total_C, SUM(b.isProductD) as total_D, SUM(b.isProductE) as total_E, SUM(b.isProductF) as total_F FROM [source].[Opportunity] A INNER JOIN ( SELECT distinct ProductFamilyName, isProductA, isProductB, isProductC, isProductD, isProductE, isProductF FROM [reference].[ProductFamilyMapping] B ) b ON a.ProductFamily = b.ProductFamilyName GROUP BY A.ID ) Z; 代替

$("#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;
}

答案 1 :(得分：0)

在页面上显示数组元素时，您需要将.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>

答案 2 :(得分：0)

alert在您的阵列上调用toString，这会添加逗号。 jquery html函数不执行此操作，而是将数组中的项追加为文本节点。即，数组中的每个字符串都将作为文本节点附加到响应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>

答案 3 :(得分：-1)

$(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>

相关问题
最新问题