vendredi 13 février 2015

JQuery Filter that shows closest li with img


I have a List that contains a lot of list items and I want to create a custom filter which I have almost completed except for one issue. Within the list there are different sections that act as headers and if there are any items under that header then the header list item should be shown as well.


this is the format of the List:



<ul>
<li><a><img/></a></li> <-----This is a Header
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a><img/></a></li> <-----This is a Header
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>


If there are no items under that header then the header should stay hidden.


Here is the code that I currently have:



$('#filter').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('#forms-list li').hide();
var $filtered = $('li').filter(function () {
return rex.test($(this).text());
});

$filtered.each(function () {
$(this).closest("li").children("a").children("img").show();
$(this).show();
});
});




Aucun commentaire:

Enregistrer un commentaire