Using :contains to found a text jquery

Question

In past questions, i asked for how can hide element's depending text from specific tag i use SPAN, well one answer says that i can use this

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/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>18/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>

SCRIPT

var zxc = 25/01/2016;
var asd = 24/01/2016;    
$(".container-c table tr td div.order-steps").each(function()
    {
       $(this).find('span:contains('+zxc+' '+asd+')').length > 0 ?
          $(this).show() : $(this).hide(); 
    });

If i use only one variable the code work's great but if i put two variable, the code is not working,

this is my fiddle

Answer 1

See you have to use string value instead of number, because the text appearing in the html document is a string. This can be simplified like:

var zxc = "25/01/2016";
var asd = "24/01/2016";    
$(".container-c div.order-steps").toggle(function(){
    return $(this).find('span:contains('+ zxc +')').length > 0 ||   
           $(this).find('span:contains('+ asd +')').length > 0
});

Answer 2

Instead of looping all the divs, you can :filter them aswell.

var asd = '25/01/2016';
var zxc = '24/01/2016';

$('.container-c .order-steps').filter(':contains('+asd+'), :contains('+zxc+')').hide();

UPDATED FIDDLE

Or if it should be the other way around:

$('.container-c .order-steps').hide().filter(':contains('+asd+'), :contains('+zxc+')').show();

UPDATED FIDDLE 2

Answer 3

your spans have only one date at a time, so you need to check them separately

//create an array of search text
var searchTxts = [ "25/01/2016", "24/01/2016" ];
$(".container-c table tr td div.order-steps").each(function()
{ 
   //loop through each value
   searchTxts.forEach( function(currentValue){
     //check if this value is contained in the span
     $(this).find('span:contains('+currentValue+')').length > 0 ?
      $(this).show() : $(this).hide(); 
   } );

});