搜索特定文本并使用 img 显示文本答案

【问题标题】：Search for specific text and show text with img搜索特定文本并使用 img 显示文本
【发布时间】：2015-03-13 21:28:44
【问题描述】：

我正在制作名册，每个运动员都有自己的 html：

    <div class="athlete"><a href="athlete.html">
        <div class="name"><p>Athlete Name</p>
        </div>
        <div class="image"><img src="_images/athletes/athlete_pic.jpg">
        </div></a>
    </div>

<a> 标签指向特定的运动员资料 html 文件。 <p>（显示他们的名字）和<img>（显示他们的图像）对于每个运动员都是独一无二的。在获得了很多运动员的名单后，我正在使用搜索功能让用户更容易找到特定的运动员。另一篇文章帮助我找到了这个搜索代码：

  jQuery.expr[':'].Contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
  };
  jQuery.expr[':'].contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
  };

    $('#inpSearch').on('keyup',function(){
        $('#wrapper div').not("#search-block").hide();
        var val = this.value;
        val = val.split(" ");
        var contains="";
        for(var i = 0; i < val.length;i++){
            contains.length >0?contains+=",div":"";
            contains+=":contains('"+val[i]+"')";
        }
        $('#wrapper div'+ contains).show();
});

这很好用，但搜索结果只有.show() 运动员的名字，即<p> 标签。我如何编辑此代码以使搜索结果 .show() 成为名称与搜索匹配的运动员的整个 html 块？

【问题讨论】：

你应该使用ajax加载运动员.html的内容。
这个想法是，搜索 Smith 会返回所有带有 Smith 名字的运动员，作为他们脸部的 img 和他们的名字在上面。然后你可以点击这个去那个运动员页面
在图像上方有一个运动员的图像网格，他们的名字。搜索功能会将网格中的数量减少到满足条件的数量。在某些情况下，某些搜索结果会返回多个运动员。

标签： jquery html search parent show

【解决方案1】：

以防将来对其他人有所帮助。答案是在选择器中包含父类。对于这个例子，要显示环绕 html 的整个 html 块：

$('#wrapper div.athlete')

【讨论】：