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>（显示他们的图像）对每个运动员都是独一无二的。在给出了很多运动员的名单后，我正在使用搜索功能，以便用户更容易找到特定的运动员。另一篇文章帮助我找到了搜索代码：

  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

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

$('#wrapper div.athlete')

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

1 个答案: