Question

在过去的问题中，我问如何隐藏元素的特定标签依赖文本我使用SPAN，一个答案说我可以使用这个

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(); 
    });

如果我只使用一个变量代码工作很好但是如果我放了两个变量，代码就不起作用了，

这是我的fiddle

Answer 1

不是循环所有div，而是:filter它们也可以。

String login_url = "https://10.0.2.2/login.php";

UPDATED FIDDLE

或者如果它应该相反：

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

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

UPDATED FIDDLE 2

Answer 2

您的spans一次只有一个日期，因此您需要单独核对

//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(); 
   } );

});

Answer 3

看到你必须使用字符串值而不是数字，因为html文档中出现的文本是一个字符串。这可以简化为：

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
});

使用：contains来创建一个文本jquery

3 个答案: