我有一个 UL,其 id 为“#menu-main”,其子 LI 每个都有一个唯一的 data-arr 属性。 我根据该数据属性进行了搜索。 但它不起作用。 这是我的代码:
function searchside(){
$('#menu-main').children('li').each(function () {
var str = document.getElementById("s").value;
var att = $(this).attr('data-arr').toString();
if(att.indexOf(str)!=-1)
{$(this).show();}
else
{$(this).hide();}
});
}
我正在使用 id“#s”的输入字段的 onkeypress 上调用此函数 谁能帮帮我。
HTML 是:
<input type="search" onkeypress="searchside();" placeholder="Search" id="s" name="s"/>
<ul id="menu-main" class="menu">
<li data-arr="royal preloader">
<a href='#!/royal_preloader' >
<li class='cboth' >
<div class='fleft mediumline smallsquare inline blackbg aligntop smallgroup labelbg bgcenter' style='background-color:#171717;background-image:url(css/images/metroicons/white/32/mobile_home_white_32.png);'></div>
Homeee
</li>
</a>
</li>
<li data-arr="noroyal preloader">
<a href='#!/royal_preloader' >
<li class='cboth'>
<div class='fleft mediumline smallsquare inline blackbg aligntop smallgroup labelbg bgcenter' style='background-color:#171717;background-image:url(css/images/metroicons/white/32/mobile_home_white_32.png);'></div>
Home
</li>
</a>
</li>
</ul>
最佳答案
这应该适合你:
$('#menu-main li').hide().filter('[data-arr="royal preloader"]').show();
要轻松添加基于搜索输入的过滤器,只需使用以下命令:
$('#s').on('keyup', function(){
$('#menu-main > li').hide().filter("[data-arr*='"+this.value+"']").show();
});
关于javascript - 使用数据属性搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18579367/