如何使用div parent在表中查找文本

Question

我想在div父元素中找到带有表的文本,如果我在我的搜索栏中写任何文本我想只显示结果和剩余的divs hidde,我有不同的td,我想在四个单元格中搜索(左边rigth)最后一个细胞并不重要

这是我的HTML:

<div class="caja-orden-curso" alt="3">
    <div class="contenido-curso">
        <table id="perrito" border="1" style="width:98%">
           <tr>
              <td width="220" height="100">
                 <div id="vehicle_type" class="top-order">
                    36624
                 </div>
              </td>
              <td width="200">
                 <div id="step_form_1" class="order-steps">
                    <span id="created">02/02/2016 10:59</span>
                 </div>
              </td>
              <td width="300">
                 <div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div>
                 <div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div>
              </td>
              <td width="120">
                 <div class="order-details-top">
                    alexis
                    <div>
                       <div class="order-details-bottom">
                          saul
                       </div>
              </td>
              <td width="120">
              565897423
              </td>
           </tr>
        </table>
    </div>
    <div class="color-lateral-curso">
    </div>
    <div class="tam-tabla-orden">
    </div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
    <div class="contenido-curso">
        <table id="perrito" border="1" style="width:98%">
           <tr>
              <td width="220" height="100">
                 <div id="vehicle_type" class="top-order">
                    35684
                 </div>
              </td>
              <td width="200">
                 <div id="step_form_1" class="order-steps">
                    <span id="created">01/02/2016 10:59</span>
                 </div>
              </td>
              <td width="300">
                 <div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
                 <div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div>
              </td>
              <td width="120">
                 <div class="order-details-top">
                    rtynbv
                    <div>
                       <div class="order-details-bottom">
                          zsdf
                       </div>
              </td>
              <td width="120">
              565897423
              </td>
           </tr>
        </table>
    </div>
    <div class="color-lateral-finalizada-segundo" id="statu-9">
    </div>
    <div class="tam-tabla-orden">
    </div>
</div>

这是我的脚本:

$("#buscador").keyup(function() {
  var dInput = $(this).val();
      if (!this.value) {
         $('div.caja-orden-curso').fadeIn();
      }
      else
        {
         $("table#perrito").each(function()
            {
             $(this).find('div.top-order:contains(' + dInput + ')').length > 0 ?
               $(this).show() : $(this).parents('div.caja-orden-curso').fadeOut(); 
          });
       }

  });

我的例子只适用于第一个细胞与其他三个细胞我不能.

这是我的小提琴

Answer 1

页面中的ID必须是唯一的.所以,改变id="perrito"以class="perrito"和做到以下几点.

$("table.perrito").each(function() {
  if ($(this).find('div:contains(' + dInput + ')').length) 
    $(this).parents('div.caja-orden-curso').fadeIn();
  else
    $(this).parents('div.caja-orden-curso').fadeOut();
});

DEMO