使用jQuery实现文本搜索时图片不显示的问题求助

你的核心问题是当前代码会遍历#myDIV2下的所有子元素（包括图片），而图片元素的.text()内容为空，搜索时会被错误隐藏。只需要调整过滤的目标元素，确保针对整个卡片容器进行判断，就能同时显示匹配的文本和图片。

修正后的完整代码 #

<input type="text" id="myInput2"  placeholder="Search for names.." title="Type in a name" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
<div class="container">
    <div class="col-xs-12">
        <div class="tab-content col-lg-offset-0 " id="myDIV2">
            <div role="tabpanel" class="tab-pane active" id="page1">
                <a href="kohlarn.html">
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <img src="img/sea/Koh Larn/3.jpg" alt=" Koh Larn" class="img-responsive" >
                            <div class="caption">
                                <h3>Koh Larn <p style="font-size: 0%;"> Koh Larn </p></h3>
                                <p>text </p>
                                <div class="btn-toolbar text-center">
                                    <a href="kohlarn.html" role="button" class="btn btn-primary pull-right">Details</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                <!-- 可添加更多卡片示例 -->
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
    $("#myInput2").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        // 针对每个卡片容器进行过滤，而非所有子元素
        $("#myDIV2 .col-sm-6.col-md-4").filter(function() {
            // 获取卡片内所有文本内容，统一转小写后判断是否匹配搜索值
            var cardText = $(this).find("*").text().toLowerCase();
            $(this).toggle(cardText.indexOf(value) > -1);
        });
    });
});
</script>

关键修改说明 #

• 修复HTML结构错误：补全了<div class="thumbnail">的闭合标签，避免DOM结构异常
• 调整过滤目标：从$("#myDIV2 *")改为$("#myDIV2 .col-sm-6.col-md-4")，只针对完整卡片容器做显示/隐藏控制
• 优化文本匹配逻辑：用$(this).find("*").text()获取卡片内所有文本内容，确保能匹配到标题、描述等所有可搜索文本，再统一转小写后和搜索值对比

修改后，搜索时会根据卡片内的文本匹配情况，整体显示或隐藏包含图片和文本的卡片，不会单独隐藏图片元素。

内容的提问来源于stack exchange，提问作者godsaha siratanativat