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

Question

我正在做一个花名册，每个运动员都有自己的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>（显示他们的图像）对于每个运动员都是独一无二的。在获得很多运动员的名单后，我使用搜索功能让用户更容易找到特定的运动员。另一个 post 帮我找到了这个搜索代码：

  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 块？

Answer 1

以防万一以后对别人有帮助。答案是在选择器中包含父 class。对于此示例，要显示环绕 html 的整个 html 块：

$('#wrapper div.athlete')

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

Search for specific text and show text with img

html

search

jquery

parent

show