2016-07-07 57 views
0

我有几件事情我想用foreach取代(这是一类我正在要求),但是他们没有一个人工作:的forEach与在

我最初对于代码(此作品正确显示内容):

for (var i in education.schools) { 
     $('#education').append(HTMLschoolStart); 

     var formattedName = HTMLschoolName.replace('%data%', education.schools[i].name).replace('#', education.schools[i].url); 
     var formattedLocation = HTMLschoolLocation.replace('%data%', education.schools[i].location); 
     var formattedDegree = HTMLschoolDegree.replace('%data%', education.schools[i].degree); 
     var formattedMajors = HTMLschoolMajor.replace('%data%', education.schools[i].majors); 
     var formattedDates = HTMLschoolDates.replace('%data%', education.schools[i].dates); 
     var formattedNameDegree = formattedName + formattedDegree; 


     $('.education-entry:last').append(formattedNameDegree); 
     $('.education-entry:last').append(formattedDates); 
     $('.education-entry:last').append(formattedLocation); 
     $('.education-entry:last').append(formattedMajors); 
    } 

我的forEach变化(不显示任何内容,所有内容将消失):

education.schools.forEach(function() { 
     $('#education').append(HTMLschoolStart); 

     var formattedName = HTMLschoolName.replace('%data%', education.schools[i].name).replace('#', education.schools[i].url); 
     var formattedLocation = HTMLschoolLocation.replace('%data%', education.schools[i].location); 
     var formattedDegree = HTMLschoolDegree.replace('%data%', education.schools[i].degree); 
     var formattedMajors = HTMLschoolMajor.replace('%data%', education.schools[i].majors); 
     var formattedDates = HTMLschoolDates.replace('%data%', education.schools[i].dates); 
     var formattedNameDegree = formattedName + formattedDegree; 


     $('.education-entry:last').append(formattedNameDegree); 
     $('.education-entry:last').append(formattedDates); 
     $('.education-entry:last').append(formattedLocation); 
     $('.education-entry:last').append(formattedMajors); 
    }) 

第二个是一个if语句,我应该更换的一部分与forEach。

if语句工作正常,像这样唯一的问题是它只有整整7个项目好,如果我再添加到阵列我也将必须更新此:

if (bio.skills.length > 0) { 
     $('#header').append(HTMLskillsStart); 

     var formattedSkill = HTMLskills.replace('%data%', bio.skills[0]); 
     $('#skills').append(formattedSkill); 
     var formattedSkill = HTMLskills.replace('%data%', bio.skills[1]); 
     $('#skills').append(formattedSkill); 
     var formattedSkill = HTMLskills.replace('%data%', bio.skills[2]); 
     $('#skills').append(formattedSkill); 
     var formattedSkill = HTMLskills.replace('%data%', bio.skills[3]); 
     $('#skills').append(formattedSkill); 
     var formattedSkill = HTMLskills.replace('%data%', bio.skills[4]); 
     $('#skills').append(formattedSkill); 
     var formattedSkill = HTMLskills.replace('%data%', bio.skills[5]); 
     $('#skills').append(formattedSkill); 
     var formattedSkill = HTMLskills.replace('%data%', bio.skills[6]); 
     $('#skills').append(formattedSkill); 
    } 

foreach循环码(代替阵列中显示每个项目的它显示阵列中的所有项目七次,基本上它似乎来遍历它的正确的次数,但所有7项输出到每次迭代):

if (bio.skills.length > 0) { 
     $('#header').append(HTMLskillsStart); 

     bio.skills.forEach(function(){ 
      var formattedSkill = HTMLskills.replace('%data%', bio.skills); 
      $('#skills').append(formattedSkill); 
     }) 
    } 
+2

因为'我'不存在于forEach – Li357

+0

[不要使用'for ... in'列举数组!](https://stackoverflow.com/q/500504/1048572) – Bergi

回答

1

尝试声明中的索引210的回调函数:

education.schools.forEach(function(val, i) { 
    $('#education').append(HTMLschoolStart); 

    var formattedName = HTMLschoolName.replace('%data%', education.schools[i].name).replace('#', education.schools[i].url); 
    var formattedLocation = HTMLschoolLocation.replace('%data%', education.schools[i].location); 
    var formattedDegree = HTMLschoolDegree.replace('%data%', education.schools[i].degree); 
    var formattedMajors = HTMLschoolMajor.replace('%data%', education.schools[i].majors); 
    var formattedDates = HTMLschoolDates.replace('%data%', education.schools[i].dates); 
    var formattedNameDegree = formattedName + formattedDegree; 


    $('.education-entry:last').append(formattedNameDegree); 
    $('.education-entry:last').append(formattedDates); 
    $('.education-entry:last').append(formattedLocation); 
    $('.education-entry:last').append(formattedMajors); 
}); 

Mozilla

回调调用与三个参数:

  • 元素值

  • 元素索引

  • 阵列正被遍历

EDIT

Andreas评价提到,如果forEach运行关闭education.schools阵列,那么可以使用所述第一参数(val)在回调中代替education.schools[i]获取当前项目。

+0

为什么不你直接使用当前值而不是'education.schools [i]'? – Andreas

+0

@Andreas虽然这会起作用,但OP的问题似乎源于对如何获得'forEach'回调索引的不清晰。 –

+1

这不应该被认为是一个投诉^^但是,为什么我们不显示OP的下一步,使'forEach'构造更容易处理:) – Andreas

0

的每个回调得到三个参数传递:

  • CurrentValue的 - 阵列中的当前元素
  • 索引 - 所述ucrrent值
  • 阵列的索引 - 的阵列本身

所以你应该使用currentValue.url而不是education.schools[i].name

education.schools.forEach(function(currentValue) { 
    $('#education').append(HTMLschoolStart); 

    var formattedName = HTMLschoolName.replace('%data%', currentValue.name).replace('#', currentValue.url); 
    var formattedLocation = HTMLschoolLocation.replace('%data%', currentValue.location); 
    var formattedDegree = HTMLschoolDegree.replace('%data%', currentValue.degree); 
    var formattedMajors = HTMLschoolMajor.replace('%data%', currentValue.majors); 
    var formattedDates = HTMLschoolDates.replace('%data%', currentValue.dates); 
    var formattedNameDegree = formattedName + formattedDegree; 


    $('.education-entry:last').append(formattedNameDegree); 
    $('.education-entry:last').append(formattedDates); 
    $('.education-entry:last').append(formattedLocation); 
    $('.education-entry:last').append(formattedMajors); 
}) 
0

您forEach中的问题是您没有定义i。要解决这个问题,您应该替换现有变量的i,或者定义i

你的代码可能是这样的:

education.schools.forEach(function() { 
    $('#education').append(HTMLschoolStart); 

    var formattedName = HTMLschoolName.replace('%data%', this.name).replace('#', this.url); 
    var formattedLocation = HTMLschoolLocation.replace('%data%', this.location); 
    var formattedDegree = HTMLschoolDegree.replace('%data%', this.degree); 
    var formattedMajors = HTMLschoolMajor.replace('%data%', this.majors); 
    var formattedDates = HTMLschoolDates.replace('%data%', this.dates); 
    var formattedNameDegree = formattedName + formattedDegree; 


    $('.education-entry:last').append(formattedNameDegree); 
    $('.education-entry:last').append(formattedDates); 
    $('.education-entry:last').append(formattedLocation); 
    $('.education-entry:last').append(formattedMajors); 
}) 

注意,主要的变化是采用this代替education.schools[i]