Question

我尝试构建一个遍历<div>所有<p>标记的搜索功能。我设法做到这一点，但不是100％。问题是整个<div>最终都没有显示出来。仅显示与搜索结果匹配的元素。无论<p>标记中是否匹配，视频始终显示。

所以，我希望<thumbnail>中的所有内容不仅要显示与搜索匹配的<p>。怎么样？

我的代码：

＆＃13;

$('#searchField').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    $('.video-list p').each(function(){
        var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- form -->

<form id="live-search" action="" class="styled" method="post">
  <div class="col-md-4">
    <input type="text" placeholder="Title" id="searchField">
  </div>
</form>

<!-- what i'm searching through ( its repeating )-->

<div class="row upload-video video-list">
  <div class="col-md-4">
    <div class="thumbnail">

      <div class="video-part">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/-w8As0gln6o" frameborder="0" allowfullscreen></iframe>
      </div>
      <p class="">Tempor incididunt ut labore et dolore magna</p>
      <p class="">Horse Name</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

你可以这样做

 $('#searchField').keyup(function(){
    var valThis = $(this).val().toLowerCase();

  var p_ele = $(".video-list .thumbnail");
  p_ele.each(function(){
    var present = $(this).children("p").text().toLowerCase();
  if(present.indexOf(valThis) == -1){
    $(this).hide();
  }else{
    $(this).show();
  }
  });
});

演示：http://jsbin.com/rasuho/edit?js,output

Answer 2

这是JS：

var filterFunc = function($parent, valThis){
  var $p = $parent.find("p");
  var found = $p.filter(function(el){          
    return $(this).text().toLowerCase().indexOf(valThis) > -1;
  });

  //hides parent div if we have not found in any of 'p'
  if(found && found.length == 0){
    $parent.hide();
  }else{
    $parent.show();
  }
}

$('#searchField').keyup(function(){
  var valThis = $(this).val().toLowerCase();
  $('.video-list').each(function(){
    filterFunc($(this), valThis);
  });
});

工作小提琴： http://jsfiddle.net/H6rQ6/16956/

Answer 3

如果搜索字词出现在任何null中，那么您要实现的目的只是显示ee个项目。（因为你给定的html是有限的，我假设重复的父包装标签是div.thumbnail ）

但是，您可以在每个div.thumbnail P代码上单独调用div.thumbnail，这会使函数触发，而不管show/hide function结果如何（例如：即使搜索字词出现在P中，这仍然会触发hide（），因为它在siblings）中找不到。

因此，您应将div.thumbnail p:nth-of-type[1]作为一个整体附加到两个子标记文本结果中。见下文

div.thumbnail p:nth-of-type[2]

see demo

Answer 4

$(this).hide()会隐藏当前元素的含义p所以请使用$(this).parent().hide()

$('#searchField').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    $('.video-list p').each(function()
    {
       var text = $(this).text().toLowerCase();
       (text.indexOf(valThis) == 0) ? $(this).parent().show() : $(this).parent().hide();
    });
});

搜索功能jQuery不显示整个div

4 个答案: