javascript - 搜索 div

Question

我找到了这篇文章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 中的内容(以及此处的“面板标题”中)吗？

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 代码段将起作用。