jQuery 对象迭代答案

【问题标题】：jQuery Object IterationjQuery 对象迭代
【发布时间】：2016-05-10 22:58:04
【问题描述】：

我在遍历 jquery 中的对象时遇到了一些麻烦。我相信在 js 文件的第 25 行，holidays.date 没有选择我打算选择的内容。也就是说，对于变量假期中的每个对象，检查是否有任何日期是今天的日期。如果不是，则运行附加，否则运行通用附加。

如何修复该选择器 (holidays.date) 以根据今天的日期检查这些日期？

谢谢大家。

$(document).ready(function() {

   var today = new Date(),
      month = today.getMonth(),
      months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
      date = today.getDate(),
      monthDay = months[month] + ' ' + date;

   var suHours = "We're Closed Today.",
      mHours = "9:00am to 5:00pm",
      tHours = "8:00am to 3:00pm",
      wHours = "9:00am to 5:00pm",
      thHours = "9:00am to 5:00pm",
      fHours = "9:00am to 7:00pm",
      sHours = "9:00am to 2:00pm";
   
   var holidays = [
         {date: 'May 10', hours: '8:00am to 12:00pm', message: 'Tuesday\'s Message - Merry Christmas!'}, 
         {date: 'May 11', hours: '9:00am to 1:00pm', message: 'Wednesday\'s Message - Happy New Years!'},
         {date: 'May 12', hours: '10:00am to 2:00pm', message: 'Thursday\'s Message - Happy Thanksgiving!'}, 
      ],
      generic = "Open Right Now!";

   function todayHoliday() {
      if ( monthDay == holidays.date ) {
         $.each( $(holidays), function() {
            $('.today-holiday-hours em').append(this.hours);
            $('.today-holiday-message em').append(this.message);
         });
      } else {
         $('.today-holiday-hours em').append('Generic Hours');
         $('.today-holiday-message em').append('Generic Message');
      }
   }
   todayHoliday();

});

*, body, html {
   font-family: "Arial", sans-serif;
   font-size: 15;
   margin: 0;
   padding: 0;
}

body {
   margin: 20px;
}

h1, section {
   margin: 20px 0;
}

h3 {
   color: #aaa;
}

section p em {
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HoursJS Holiday Version</title>
   <link rel="stylesheet" href="style.css">

</head>
<body>
   <h1 id="title">HoursJS Plugin Holiday Version v: 0.0.1</h1>

   <hr>

<!-- Today is Holiday Hours & Message -->
   <section>
      <h3>Today is a Holiday:</h3>
      <p class="today-holiday-hours"><em></em></p>
      <p class="today-holiday-message"><em></em></p>
   </section>

</body>
</html>

【问题讨论】：

这不是你需要 jquery 循环的东西。只需在 holidays 数组上执行 for in 循环或 for of 循环
@winhowes 没有关注你。 for in 和 for of 与each() 本质上不一样吗？我对 for in 和 for of 的了解不够多，无法争辩，但我认为它们的作用与每个相同。
是的，它们很相似，我将使用 .each 发布一个答案，向您展示它是如何工作的。只是没有必要
他们似乎持有不同的价值观。尝试打印出holiday.date 和今天的日期
@Striker 我认为问题在于holidays.date 选择器。如果我改为做 holiday[0].date，我会开始得到一些结果，但我要具体。而不是迭代。

标签： jquery loops object

【解决方案1】：

要使用.each，您无需“选择”您的假期，只需这样做：

var matchFound = false;
$.each(holidays, function() {
    if ( monthDay == this.date ) {
        matchFound = true;
        $('.today-holiday-hours em').append(this.hours);
        $('.today-holiday-message em').append(this.message);
  } 
});
if (!matchFound) {
     $('.today-holiday-hours em').append('Generic Hours');
     $('.today-holiday-message em').append('Generic Message');
}

选择器 ($(something)) 用于选择 DOM 中的元素。在这种情况下，您已经有一个数组，因此您可以对其进行迭代。

编辑：我更新了函数以将 if 语句放入循环中，我认为这是所需的行为。我还根据所需行为的 cmets 将 else 语句移到了循环之外

【讨论】：

我试过了，它仍然跳过它并直接进入通用（其他）部分。我认为问题在于holidays.date。如果我改为做 holiday[0].date，我会开始得到一些结果，但我会很具体。
@Sergio 看看我的编辑，我认为这会给你你想要的输出。您的 if 语句中有循环，而不是相反。 holidays.date 未定义，因为 holidays 是一个数组。
其实我之前也有过这个，但问题是因为 else 在 each 里面，它会吐出 3 倍的泛型（else）部分。这就是为什么我将每个循环移动到 if 部分内部。
删除你的 if 语句并使用布尔变量并在每个 () 中设置它
@Sergio 是循环在找到匹配项后停止并打印出“通用时间”位的理想行为？

【解决方案2】：

试试这个：

var isHoliday = false;

$.each( $(holidays), function() {
     if ( monthDay == this.date ) 
    { 
        $('.today-holiday-hours em').append(this.hours); 
        $('.today-holiday-message em').append(this.message); });
        isHoliday = true;
    }
} 

if (!isHoliday )
{ 
    $('.today-holiday-hours em').append('Generic Hours');
    $('.today-holiday-message em').append('Generic Message'); 
}

【讨论】：

这与上面提供的答案 winhowes 非常相似。也非常感谢您的帮助。我讨厌我不能给你们两个正确答案的功劳。不过谢谢。

【解决方案3】：

我认为你可以使用 grep 函数

var xyz = $.grep(holidays, function (n) {
             return n.date === monthDay;
          });

【讨论】：