javascript - 使用日期循环jquery隐藏元素

Question

我想隐藏元素(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循环来获取过去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+"')") 中的方式隐藏了所有内容，而不是数组。

这是我的 fiddle

Answer 1

您实际上是在进行字符串连接，而不是将元素添加到数组中。您需要将 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/