搜索 div

Question

我找到了这个 post How to perform a real time search and filter on a HTML table，我想调整它以在 div 秒内搜索。

Html :

<input type="text" id="search" placeholder="Type to search">  
<table id="table">
    <tr>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">Panel 1</div>
            <div class="panel-body">
                <p>1</p>
            </div>
        </div>
    </tr>
    <tr>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">Panel 2</div>
            <div class="panel-body">
                <p>2</p>
            </div>
        </div>
    </tr>
</table>

Js:

var $rows = $('#table tr');
$('#search').keyup(function() {
  var val = '^(?=.*\b' + $.trim($(this).val()).split(/\s+/).join('\b)(?=.*\b') + ').*$',
    reg = RegExp(val, 'i'),
    text;

  $rows
    .show()
    .filter(function() {
      text = $(this).text().replace(/\s+/g, ' ');
      return !reg.test(text);
    })
    .hide();
});

谁能解释一下如何访问我的 div 中的内容（这里是 "panel-heading"）？

Answer 1

您的html无效。 tr 元素只能有 td 或 th 个子元素。您应该用 td 元素包裹 tr 内容。

这就是我的 Chromium 浏览器呈现您的 html:

的方式

<input type="text" id="search" placeholder="Type to search">
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel 1</div>
    <div class="panel-body">
        <p>1</p>
    </div>
</div>
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel 2</div>
    <div class="panel-body">
        <p>2</p>
    </div>
</div>
<table id="table">
    <tbody>
        <tr></tr>
        <tr></tr>
    </tbody>
</table>

修复标记，JavaScript 代码段将起作用。

搜索 div

Search into divs

javascript

search

indexof