使用日期循环 jquery 隐藏元素

Hiding elements with date loop jquery

本文关键字：隐藏 元素 jquery 循环 日期      更新时间：2023-09-26

我想隐藏元素（div），但使用日期循环。

我有这个表结构：

.HTML 

<div class="container-a">
<div class="container-b">
<div class="container-c">
<table border="1"style="width:98%">
   <tr>
      <td width="220" height="100">
         1
      </td>
      <td width="200">
         2
      </td>
      <td width="300">
         <div id="step_form_1" class="order-steps">
            <span>25/01/2016 13:30</span>
            <div>
      </td>
      <td width="120">
      4
      </td>
      <td width="120">
      5
      </td>
   </tr>
</table>
</div>
<div class="side-color">
</div>
<div class="tam">
</div>
</div>
<div class="container-b">
<div class="container-c">
<table border="1"style="width:98%">
   <tr>
      <td width="220" height="100">
         1
      </td>
      <td width="200">
         2
      </td>
      <td width="300">
         <div id="step_form_1" class="order-steps">
            <span>24/01/2016 13:30</span>
            <div>
      </td>
      <td width="120">
      4
      </td>
      <td width="120">
      5
      </td>
   </tr>
</table>
</div>
<div class="side-color">
</div>
<div class="tam">
</div>
</div>
<div class="container-b">
<div class="container-c">
<table border="1"style="width:98%">
   <tr>
      <td width="220" height="100">
         1
      </td>
      <td width="200">
         2
      </td>
      <td width="300">
         <div id="step_form_1" class="order-steps">
            <span>23/10/2015 13:30</span>
            <div>
      </td>
      <td width="120">
      4
      </td>
      <td width="120">
      5
      </td>
   </tr>
</table>
</div>
<div class="side-color">
</div>
<div class="tam">
</div>
</div>
<div class="container-b">
<div class="container-c">
<table border="1"style="width:98%">
   <tr>
      <td width="220" height="100">
         1
      </td>
      <td width="200">
         2
      </td>
      <td width="300">
         <div id="step_form_1" class="order-steps">
            <span>18/11/2015 13:30</span>
            <div>
      </td>
      <td width="120">
      4
      </td>
      <td width="120">
      5
      </td>
   </tr>
</table>
</div>
<div class="side-color">
</div>
<div class="tam">
</div>
</div>
<div class="container-b">
<div class="container-c">
<table border="1"style="width:98%">
   <tr>
      <td width="220" height="100">
         1
      </td>
      <td width="200">
         2
      </td>
      <td width="300">
         <div id="step_form_1" class="order-steps">
            <span>18/08/2015 13:30</span>
            <div>
      </td>
      <td width="120">
      4
      </td>
      <td width="120">
      5
      </td>
   </tr>
</table>
</div>
<div class="side-color">
</div>
<div class="tam">
</div>
</div>
<div class="container-b">
<div class="container-c">
<table border="1"style="width:98%">
   <tr>
      <td width="220" height="100">
         1
      </td>
      <td width="200">
         2
      </td>
      <td width="300">
         <div id="step_form_1" class="order-steps">
            <span>18/01/2015 13:30</span>
            <div>
      </td>
      <td width="120">
      4
      </td>
      <td width="120">
      5
      </td>
   </tr>
</table>
</div>
<div class="side-color">
</div>
<div class="tam">
</div>
</div>

我有这个for loop来获得最后 6 个月。

Jquery

var str="";
 var monthNames = [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ];
                        for ( var i = 5; i >= 0; i--) {
                      var now = new Date();
                      var date = new Date(now.setMonth(now.getMonth() - i));
                      var datex = ("0" + date.getDate()).slice(-2) + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + date.getFullYear();
                            str += ""+ monthNames[date.getMonth()] + "/" + date.getFullYear()+"'n";
                    }
                    alert(str);

我有这段代码来查找 Div 中的每个元素并隐藏/显示

$(".container-c table tr td div#step_form_1").each(function()
                  {
                        $(this).find('span').filter(":contains('"+str+"')").length > 0 ? $(this).show() : $(this).parents('div.container-c').fadeOut();
                  });

但是我将变量放入 filter(":contains('"+str+"')") 中的方式隐藏了所有数组而不是数组。

这是我的小提琴

您实际上是在执行string concatenation，而不是将元素添加到array中。您需要将str变量声明为数组，并使用 push 将元素添加到其中。在每个循环期间，可以使用each函数index遍历数组中的相应元素。

 var pol = "25/01/2016";
 var str= [];
 var monthNames = [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ];
                        for ( var i = 5; i >= 0; i--) {
                      var now = new Date();
                      var date = new Date(now.setMonth(now.getMonth() - i));
                      var datex = ("0" + date.getDate()).slice(-2) + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + date.getFullYear();
                            str.push(monthNames[date.getMonth()] + "/" + date.getFullYear());
                    }
                    alert(str);
                     $(".container-c table tr td div#step_form_1 span").each(function(index)
                  {
                        $(this).filter(":contains('"+str[index]+"')").length > 0 ? $(this).show() : $(this).parents('div.container-c').fadeOut();
                  });

工作示例：https://jsfiddle.net/DinoMyte/6x80vabm/24/

相关文章：