如何正确使用map（）迭代我的数组元素？

时间：2015-11-13 03:54:26

标签： javascript jquery arrays

我originally写了一个关于document.write（）的问题。然而，按照惯例，每个人都说这是愚蠢的。所以我改变了我的方法并使用了建议的getElementsByClassName（）并改变了我安排数据的方式。这些东西都是给我的......现在，当我遍历我的东西时，它会吐出每个标题而不是一个。

如何修复this(codepen)为每个日期或地点创建新的div ，而不是将所有地点/日期放入一个div？

<html>
  <body>
    <head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>


        <style>
        .note {
          background-color: khaki;
        }
        .note-message {
          background-color: peachpuff;
        }
        [class] {
          padding: 1em;
        }

        .cat{
          color:red;
        }
        </style>
      </head>

<div class="container">

<article>
  <p class="class-name">
    LOCATION NUMBER ONE has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER TWO has no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER THREE has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER FOUR has no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER FIVE has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER SIX has a no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER SEVEN has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER EIGHT has no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER NINE has a class of "class-name"
  </p>

</article>
</div> <!-- CONTAINER -->
</body>
</html>
<script>

var events = [
    {place: "Orlando",        date: "New York",             eventName: "Cats & Dogs"},
    {place: "New York",       date: "November 5-8, 2015",   eventName: "Meet and Greet"},
    {place: "Detroit",        date: "November 5-8, 2015",   eventName: "Meet and Greet"},
    {place: "Boston",         date: "April 5-8, 2015",      eventName: "Meet and Greet"},
    {place: "Boston",         date: "November 5-8, 2015",   eventName: "Drink Coffee"},
    {place: "Boston",         date: "July 5-8, 2015",       eventName: "Drink Coffee"},
    {place: "Phoenix",        date: "December 5-8, 2015",   eventName: "Drink Coffee"},
    {place: "Phoenix",        date: "July 5-8, 2015",       eventName: "Dance With Me"},
    {place: "Phoenix",        date: "April 5-8, 2015",      eventName: "Dance With Me"},
    {place: "Boston",         date: "December 5-8, 2015",   eventName: "Dance With Me"},
    {place: "Boston",         date: "December 5-8, 2015",   eventName: "Dance With Me"},
    {place: "Boston",         date: "October 5-8, 2015",    eventName: "Dance With Me"},
    {place: "Boston",         date: "September 5-8, 2015",  eventName: "Kiss Me... I'm Irish"},
    {place: "Orlando",        date: "May 5-8, 2015",        eventName: "Kiss Me... I'm Irish"},
    {place: "Orlando",        date: "August 5-8, 2015",     eventName: "Kiss Me... I'm Irish"},
    {place: "Orlando",        date: "February 5-8, 2015",   eventName: "Potty Training"},
    {place: "Boston",         date: "June 5-8, 2015",       eventName: "Potty Training"},
    {place: "Boston",         date: "May 5-8, 2015",        eventName: "Potty Training"},
    {place: "Boston",         date: "February 5-8, 2015",   eventName: "I Married an Axe Murderer"},
    {place: "Boston",         date: "September 5-8, 2015",  eventName: "Meet The Authors"},
    {place: "San Antonio",    date: "August 5-8, 2015",     eventName: "Meet The Authors"},
    {place: "San Antonio",    date: "January 5-8, 2015",    eventName: "Sponsorship"},
    {place: "San Antonio",    date: "October 5-8, 2015",    eventName: "Sponsorship", },
    {place: "Boston",         date: "January 5-8, 2015",    eventName: "Soylent Green"},
    {place: "Boston",         date: "October 5-8, 2015",    eventName: "Dance With The Devil"},
    {place: "Boston",         date: "August 5-8, 2015",     eventName: "Getting Started"}
    ];


function insertTags(before){
  "use strict";

var els = document.getElementsByClassName("class-name");

Array.prototype.forEach.call(els, function(el) {

var breakTag = window.document.createElement("br" );
var note = window.document.createElement("h3" );
var noteP = window.document.createElement("p" );

  breakTag.setAttribute("class","clear");
  note.setAttribute("class","note");
  noteP.setAttribute("class","note-message");

  note.appendChild(noteP);


  noteP.innerHTML = events.map(function(entry) {
    return entry.eventName;
  });

  el.parentNode.insertBefore( breakTag, el );
  el.parentNode.insertBefore( note, el );

  return breakTag;
  return note;
});
}
insertTags();
</script>

1 个答案:

答案 0 :(得分：1)

尝试将div元素替换为p上的noteP元素，将p元素作为字符串从.map()返回，使用Array.prototype.join()并"<br>" 1}}参数;正在删除return breakTag，return note 

function insertTags(before){
  "use strict";

var els = document.getElementsByClassName("class-name");

Array.prototype.forEach.call(els, function(el) {

var breakTag = window.document.createElement("br" );
var note = window.document.createElement("h3" );
// create `div` element
var noteDiv = window.document.createElement("div" );

  breakTag.setAttribute("class","clear");
  note.setAttribute("class","note");
  noteDiv.setAttribute("class","note-message");

  note.appendChild(noteDiv);

  noteDiv.innerHTML = events.map(function(entry) {
    // return `p` element 
    return "<p>" + entry.eventName + "</p>";
  }).join("<br>"); // join array items with `<br>`

  el.parentNode.insertBefore( breakTag, el );
  el.parentNode.insertBefore( note, el );

  // return breakTag;
  // return note;
});
}
insertTags();


<html>
  <body>
    <head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>


        <style>
        .note {
          background-color: khaki;
        }
        .note-message {
          background-color: peachpuff;
        }
        [class] {
          padding: 1em;
        }

        .cat{
          color:red;
        }
        </style>
      </head>

<div class="container">

<article>
  <p class="class-name">
    LOCATION NUMBER ONE has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER TWO has no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER THREE has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER FOUR has no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER FIVE has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER SIX has a no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER SEVEN has a class of "class-name"
  </p>

  <p>
    LOCATION NUMBER EIGHT has no class name.
  </p>

  <p class="class-name">
    LOCATION NUMBER NINE has a class of "class-name"
  </p>

</article>
</div> <!-- CONTAINER -->
<script>

var events = [
    {place: "Orlando",        date: "New York",             eventName: "Cats & Dogs"},
    {place: "New York",       date: "November 5-8, 2015",   eventName: "Meet and Greet"},
    {place: "Detroit",        date: "November 5-8, 2015",   eventName: "Meet and Greet"},
    {place: "Boston",         date: "April 5-8, 2015",      eventName: "Meet and Greet"},
    {place: "Boston",         date: "November 5-8, 2015",   eventName: "Drink Coffee"},
    {place: "Boston",         date: "July 5-8, 2015",       eventName: "Drink Coffee"},
    {place: "Phoenix",        date: "December 5-8, 2015",   eventName: "Drink Coffee"},
    {place: "Phoenix",        date: "July 5-8, 2015",       eventName: "Dance With Me"},
    {place: "Phoenix",        date: "April 5-8, 2015",      eventName: "Dance With Me"},
    {place: "Boston",         date: "December 5-8, 2015",   eventName: "Dance With Me"},
    {place: "Boston",         date: "December 5-8, 2015",   eventName: "Dance With Me"},
    {place: "Boston",         date: "October 5-8, 2015",    eventName: "Dance With Me"},
    {place: "Boston",         date: "September 5-8, 2015",  eventName: "Kiss Me... I'm Irish"},
    {place: "Orlando",        date: "May 5-8, 2015",        eventName: "Kiss Me... I'm Irish"},
    {place: "Orlando",        date: "August 5-8, 2015",     eventName: "Kiss Me... I'm Irish"},
    {place: "Orlando",        date: "February 5-8, 2015",   eventName: "Potty Training"},
    {place: "Boston",         date: "June 5-8, 2015",       eventName: "Potty Training"},
    {place: "Boston",         date: "May 5-8, 2015",        eventName: "Potty Training"},
    {place: "Boston",         date: "February 5-8, 2015",   eventName: "I Married an Axe Murderer"},
    {place: "Boston",         date: "September 5-8, 2015",  eventName: "Meet The Authors"},
    {place: "San Antonio",    date: "August 5-8, 2015",     eventName: "Meet The Authors"},
    {place: "San Antonio",    date: "January 5-8, 2015",    eventName: "Sponsorship"},
    {place: "San Antonio",    date: "October 5-8, 2015",    eventName: "Sponsorship", },
    {place: "Boston",         date: "January 5-8, 2015",    eventName: "Soylent Green"},
    {place: "Boston",         date: "October 5-8, 2015",    eventName: "Dance With The Devil"},
    {place: "Boston",         date: "August 5-8, 2015",     eventName: "Getting Started"}
    ];


function insertTags(before){
  "use strict";

var els = document.getElementsByClassName("class-name");

Array.prototype.forEach.call(els, function(el) {

var breakTag = window.document.createElement("br" );
var note = window.document.createElement("h3" );
var noteDiv = window.document.createElement("div" );

  breakTag.setAttribute("class","clear");
  note.setAttribute("class","note");
  noteDiv.setAttribute("class","note-message");

  note.appendChild(noteDiv);


  noteDiv.innerHTML = events.map(function(entry) {
    return "<p>" + entry.eventName + "</p>";
  }).join("<br>");

  el.parentNode.insertBefore( breakTag, el );
  el.parentNode.insertBefore( note, el );

});
}
insertTags();
  </script>
</body>
</html>

相关问题
最新问题