0

My HTML is like this

    <div class="innerbox">
  <div class="simple-list02">
    <ul>
      <li class="first-child last-child odd-item">
        <h5 class="text-style02">
          <a href="/kontakt/find-medarbejder/ledelse/">Ledelse</a>
        </h5>

      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
  <div class="simple-list02">
    <ul>
      <li class="first-child last-child odd-item">
        <h5 class="text-style02">
          <a href="/kontakt/find-medarbejder/administration/">Administration</a>
        </h5>
      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
  <div class="simple-list02">
    <ul>
      <li class="first-child last-child odd-item">
        <h5 class="text-style02">
          <a href="/kontakt/find-medarbejder/omstillingbogholderi/">Omstilling/bogholderi</a>
        </h5>

      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
</div>

and I got an HTML input box like this

<input type="text" name="textbox" id="txtesearch" class="text" placeholder="Søg efter medarbejder">

Now what I want is When some one enters "Ledelse" in this textbox I want to hide all div which got a class "simple-list02" excluding first one as it contains an h5 with text "Ledelse" in it. I had tried hard coding all the h5 text,But I don't believe its an ideal solution and as this is jquery there must be a smarter way to achieve this .can any one give me a hand

4

1 回答 1

4 
$('.simple-list02:not(:has(h5:contains(' + searchTerm + ')))').hide();

不过，上面的代码只是隐藏起来。如果文本发生更改，您可能希望先显示所有元素，然后隐藏不匹配的元素。

 $('.simple-list02')
    .show()
    .not(':has(h5:contains(' + searchTerm + '))').hide();

演示

请注意，:contains区分大小写。如果你想要更高级的东西，你可以通过一个.filter函数传递一组简单列表：

$('.simple-list02')
    .show()
    .filter(function() { 
        return $(this).find('h5').text().toLowerCase()
                  .indexOf( searchTerm.toLowerCase() ) == -1;
    })
    .hide();

此外，您可以滚动自己的:contains选择器，如本博文中所述：

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

// since 1.8
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});
于 2013-07-02T11:43:38.333 回答