Javascript 如何使用Jquery在日期之间搜索并隐藏div？

我有以下HTML代码： 我的代码有几个类“聊天信息”

13/02/2016
Lorem ipsum dolor sit amet
15/02/2016
乌拉姆科珀熟食公司

我使用下面的Javascript函数遍历.message类并检查消息日期是否介于开始日期和结束日期之间

function dateBetweenCheck() {
      var sDate,eDate;
      sDate = $.datepicker.parseDate('dd/mm/yy', $('#startDate').val());
      eDate = $.datepicker.parseDate('dd/mm/yy', $('#endDate').val());
      $(".message").each(function(){
        var messageDate = $.datepicker.parseDate('dd/mm/yy', $(this).find(".message-date").text());
        if((messageDate <= eDate && messageDate >= sDate)) {
          $(this).remove();
          return true;
        }
      });

    }

函数dateBetweenCheck（）{
var sDate，eDate；
sDate=$.datepicker.parseDate（'dd/mm/yy'，$（'startDate'）.val（）；
eDate=$.datepicker.parseDate（'dd/mm/yy'，$（'#endDate'）.val（））；
$（“.message”）.each（函数（）{
var messageDate=$.datepicker.parseDate（'dd/mm/yy'，$（this.find（“.message date”）.text（））；
如果（（messageDate=sDate））{
$（this.remove（）；
返回true；
}
});
}

如何删除.message类及其子类？ 当我单击筛选按钮时，如何使.message类再次显示？

• 首先，不要在jQuery中使用内联单击处理程序。它无缘无故地将处理程序与注册分离，jQuery为您提供了更多的事件特性
• 在没有更多信息的情况下，使用类来指示是否应用了筛选器（本例中为

  active

  ）
• 使用

  hide（）

  和

  show（）

  或

  toggle（）

  来。。。等等。。。隐藏、显示或切换项：）删除将永远将它们从DOM中删除

您的HTML应该在筛选器上有一个ID：

<a href="#" id="dateBetween">Filter</a>

jQuery是这样的：

$('#dateBetween').click(function() {
  var sDate, eDate;

  // The link clicked
  var $link = $(this);

  // Toggle the class that indicates we are filtering
  $link.toggleClass("active");

  // If we are filtering...
  if ($link.hasClass("active")) {

    sDate = $.datepicker.parseDate('dd/mm/yy', $('#startDate').val());
    eDate = $.datepicker.parseDate('dd/mm/yy', $('#endDate').val());

    // Hide or show messages based on the date
    $(".message").each(function() {

      var messageDate = $.datepicker.parseDate('dd/mm/yy', $(this).find(".message-date").text());

      // A true expression to toggle does a show(), else hide()
      $(this).toggle(messageDate <= eDate && messageDate >= sDate);
    });
  }
  else
  {
     // Show all messages
     $(".message").show();
  }
  // This causes the filter link to do nothing (otherwise it may move the browser window to the top)
  return false;
});

$（'#dateBetween'）。单击（函数（）{
var sDate，eDate；
//链接点击了
var$link=$（此）；
//切换指示我们正在筛选的类
$link.toggleClass（“活动”）；
//如果我们正在筛选。。。
if（$link.hasClass（“活动”））{
sDate=$.datepicker.parseDate（'dd/mm/yy'，$（'startDate'）.val（）；
eDate=$.datepicker.parseDate（'dd/mm/yy'，$（'#endDate'）.val（））；
//根据日期隐藏或显示消息
$（“.message”）.each（函数（）{
var messageDate=$.datepicker.parseDate（'dd/mm/yy'，$（this.find（“.message date”）.text（））；
//要切换的true表达式执行show（），else hide（）操作
$（this）.toggle（messageDate=sDate）；
});
}
其他的
{
//显示所有消息
$（“.message”）.show（）；
}
//这会导致过滤器链接不执行任何操作（否则可能会将浏览器窗口移到顶部）
返回false；
});

• 首先，不要在jQuery中使用内联单击处理程序。它无缘无故地将处理程序与注册分离，jQuery为您提供了更多的事件特性
• 在没有更多信息的情况下，使用类来指示是否应用了筛选器（本例中为

  active

  ）
• 使用

  hide（）

  和

  show（）

  或

  toggle（）

  来。。。等等。。。隐藏、显示或切换项：）删除将永远将它们从DOM中删除

您的HTML应该在筛选器上有一个ID：

<a href="#" id="dateBetween">Filter</a>

jQuery是这样的：

$('#dateBetween').click(function() {
  var sDate, eDate;

  // The link clicked
  var $link = $(this);

  // Toggle the class that indicates we are filtering
  $link.toggleClass("active");

  // If we are filtering...
  if ($link.hasClass("active")) {

    sDate = $.datepicker.parseDate('dd/mm/yy', $('#startDate').val());
    eDate = $.datepicker.parseDate('dd/mm/yy', $('#endDate').val());

    // Hide or show messages based on the date
    $(".message").each(function() {

      var messageDate = $.datepicker.parseDate('dd/mm/yy', $(this).find(".message-date").text());

      // A true expression to toggle does a show(), else hide()
      $(this).toggle(messageDate <= eDate && messageDate >= sDate);
    });
  }
  else
  {
     // Show all messages
     $(".message").show();
  }
  // This causes the filter link to do nothing (otherwise it may move the browser window to the top)
  return false;
});

$（'#dateBetween'）。单击（函数（）{
var sDate，eDate；
//链接点击了
var$link=$（此）；
//切换指示我们正在筛选的类
$link.toggleClass（“活动”）；
//如果我们正在筛选。。。
if（$link.hasClass（“活动”））{
sDate=$.datepicker.parseDate（'dd/mm/yy'，$（'startDate'）.val（）；
eDate=$.datepicker.parseDate（'dd/mm/yy'，$（'#endDate'）.val（））；
//根据日期隐藏或显示消息
$（“.message”）.each（函数（）{
var messageDate=$.datepicker.parseDate（'dd/mm/yy'，$（this.find（“.message date”）.text（））；
//要切换的true表达式执行show（），else hide（）操作
$（this）.toggle（messageDate=sDate）；
});
}
其他的
{
//显示所有消息
$（“.message”）.show（）；
}
//这会导致过滤器链接不执行任何操作（否则可能会将浏览器窗口移到顶部）
返回false；
});

您应该隐藏项目（使用

.hide（）

），而不是删除项目（使用

.remove（）

）。无法恢复已删除的项目。相反，你只需将它们全部显示出来。你有没有想过使用moment.js？这可能会缩短您正在编写的代码量。您可以将所有时间放在一个数组中，并查看它是否介于两者之间。如果是，请在HTML中查找数据日期属性或特殊id。您应该隐藏项目（使用

.hide（）

），而不是删除项目（使用

.remove（）

）。无法恢复已删除的项目。相反，你只需将它们全部显示出来。你有没有想过使用moment.js？这可能会缩短您正在编写的代码量。您可以将所有时间放在一个数组中，查看它是否介于两者之间。如果介于两者之间，请在HTML中查找数据日期属性或特殊id。