类似过滤树的可折叠内容

Question

我有一个具有多个可折叠内容(树样)的列表视图。过滤器从可折叠集自动展开最后一个块，而不是搜索真正的块/div(来自可折叠div的值)。

演示

以下是代码：

<script>
$("#mineralslist").on("filterablefilter", function (event, ui) {
    if ($("#mineralslist .ui-screen-hidden").length == 0) {
        $('#mineralslist [data-role="collapsible"]').collapsible("collapse");
    } else {
        $('#mineralslist [data-role="collapsible"]').collapsible("expand");

    }

});
</script>

<div data-role="content" id="iama">
    <ul data-role="listview" id="mineralslist" data-inset='true' data-filter="true" data-filter-placeholder="Search mineral...">
        <li>
            <div data-role="collapsible" data-inset='false'>
                 <h3>Native elements</h3>

                <div data-role="collapsible-set">
                    <div data-role="collapsible">
                         <h3>Gold group</h3>

                        <div data-role="collapsible-set">
                            <div data-role="collapsible">
                                 <h4>Gold</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Au</td>
                                            <td>Isometric</td>
                                            <td>Rich yellow</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div data-role="collapsible">
                                 <h4>Silver</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Ag</td>
                                            <td>Isometric</td>
                                            <td>Silver-white</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div data-role="collapsible">
                                 <h4>Copper</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Cu</td>
                                            <td>Isometric</td>
                                            <td>Brown, copper red, light pink, red</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div data-role="collapsible">
                                 <h4>Lead</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Pb</td>
                                            <td>Isometric</td>
                                            <td>Grey, but often coated</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div data-role="collapsible">
                                 <h4>Aluminum</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Al</td>
                                            <td>Isometric</td>
                                            <td>Grayish-White</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div data-role="collapsible">
                         <h3>Platinum group</h3>

                        <div data-role="collapsible-set">
                            <div data-role="collapsible">
                                 <h4>Platinum</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Pt</td>
                                            <td>Isometric</td>
                                            <td>Steel grey to dark grey</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div data-role="collapsible">
                                 <h4>Iridium</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>(Ir,Os,Ru)</td>
                                            <td>Isometric</td>
                                            <td>White</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div data-role="collapsible">
                                 <h4>Palladium</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>(Pd,Pt)</td>
                                            <td>Isometric</td>
                                            <td>White</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div data-role="collapsible">
                         <h3>Carbon Polymorph group</h3>

                        <div data-role="collapsible-set">
                            <div data-role="collapsible">
                                 <h4>Diamond</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>C</td>
                                            <td>Isometric</td>
                                            <td>Colourless</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div data-role="collapsible">
                                 <h4>Graphite</h4>

                                <table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
                                    <thead>
                                        <tr>
                                            <th class="label">Formula</th>
                                            <th class="label">System</th>
                                            <th class="label">Colour</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>C</td>
                                            <td>Hexagonal</td>
                                            <td>Iron black to steel-grey</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div data-role="collapsible" data-inset='false'>
                 <h3>Organic compounds</h3>

                <p>Answer.</p>
            </div>
        </li>
    </ul>
</div>

示例:我想搜索铱，我获得了以下内容：

​

我想要的是只扩展过滤过的块。就像在这张图片里：

​

Answer 1

试一试jQ :contains()选择器前缀

var s = $('input').val() // itidium
var list = $('#mineralslist').find('h4:contains("'+s+'")').css({'display':'block','opacity':1})

之后，必须显示列表的所有父元素。