Question

我试图根据元素ID将多个值推送到数组中。

我希望结果为3和4，但我得1 2 3 4。为什么在以下示例中是这种情况？

＆＃13;

var myArray = [];
$( '#bla' ).each( function() {
   myArray.push( {
     test: $( this ).text(),
   });
});
console.log( myArray );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>1</div>
    <div>2</div>
    <div id="bla">3</div>
    <div id="bla">4</div>
</div>

＆＃13;

Answer 1

您正在查看HTML的内容，而不是console.log。

这是您需要解决的问题：

包含jQuery
使用class而不是id - 文档中只能有一个id，因此您只能得到一个结果
查看控制台

var myArray = [];
$( '.bla' ).each( function() {
   myArray.push( {
     test: $( this ).text(),
   });
});
console.log( myArray );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>1</div>
    <div>2</div>
    <div class="bla">3</div>
    <div class="bla">4</div>
</div>

Answer 2

第一个ID必须是唯一的将id替换为类并使用您的代码段

var myArray = [];
$( '.bla' ).each( function() {
   myArray.push( {
     test: $( this ).text(),
   });
});
console.log( myArray );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>1</div>
    <div>2</div>
    <div class="bla">3</div>
    <div class="bla">4</div>
</div>

Answer 3

首先，您不能拥有两个具有相同ID属性的HTML元素。它是独一无二的，它应该只有一个在页面上。

第二，如果您使用外部的js脚本（<scritp></script>之间没有包含），您应该使用（document.ready或jQuery $(docuemnt).ready(function(){}) [在我的情况下它是短路的这样做]），因为你不想在未加载之前阅读HTML值。

＆＃13;

(function () {
  var myArray = [];

  $( '.bla' ).each( function() {
    myArray.push( {
      test: $( this ).text(),
    });
  });
  
  console.log( myArray );
}());

＆＃13;

<div>
    <div>1</div>
    <div>2</div>
    <div class="bla">3</div>
    <div class="bla">4</div>
</div>

＆＃13;

在Javascript中将多个值推送到数组中不起作用

3 个答案: