我想在带有表的 div 父级中查找文本，如果我在搜索栏中写任何文本，我只想显示结果，其余的 div 隐藏，我有不同的 td，我想在四个单元格中搜索(从左到右)最后一个单元格不重要

这是我的 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(); 
          });
       }

  });

我的示例只适用于第一个单元格，其他三个单元格我不能。

这是我的 fiddle

最佳答案

页面中的 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

关于javascript - 如何在带有div父级的表中查找文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35238436/