Javascript 使用数据属性进行搜索
我有一个id为“#menu main”的UL,每个子级都有一个唯一的数据arr属性。 我根据该数据属性进行了搜索。 但它不起作用。 这是我的密码:Javascript 使用数据属性进行搜索,javascript,jquery,Javascript,Jquery,我有一个id为“#menu main”的UL,每个子级都有一个唯一的数据arr属性。 我根据该数据属性进行了搜索。 但它不起作用。 这是我的密码: function searchside(){ $('#menu-main').children('li').each(function () { var str = document.getElementById("s").value; var att = $(this).attr('data-arr').toString(); if(a
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”的输入字段的按键上调用此函数
有人能帮我吗
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();
});
这应该适合您:
$('#menu-main li').hide().filter('[data-arr="royal preloader"]').show();
要根据搜索输入轻松添加过滤器,请使用以下命令:
$('#s').on('keyup', function(){
$('#menu-main > li').hide().filter("[data-arr*='"+this.value+"']").show();
});
试试这个
function searchside() { ...
$('#menu-main').find('[data-arr="royal preloader"]').show();
$('#menu-main').find('[data-arr!="royal preloader"]').hide();
}
基于您的更新
function searchside() { ...
$('[data-arr="' + str +'"]').show();
$('[data-arr!="' + str +'"]').hide();
}
顺便说一下,您在li标记中嵌套了li标记,这是错误的,您应该更改它
function searchside() { ...
$('#menu-main').find('[data-arr="royal preloader"]').show();
$('#menu-main').find('[data-arr!="royal preloader"]').hide();
}
基于您的更新
function searchside() { ...
$('[data-arr="' + str +'"]').show();
$('[data-arr!="' + str +'"]').hide();
}
顺便说一下,您在li标记中嵌套了li标记,这是错误的,您应该更改它我们可以看看您的HTML代码吗?我感觉您的id不是唯一的,这导致了您的问题。而且,
attr()
返回一个字符串,您不需要调用。toString()
;而且可能值得切换到使用$(this).data('arr')
来代替使用attr()
。您在li标记中嵌套了li标记,这不好,您应该更改它。我们可以看看您的HTML代码吗?我感觉您的id不是唯一的,这导致了您的问题。而且,attr()
返回一个字符串,您不需要调用。toString()
;而且可能值得切换到使用$(this).data('arr')
来代替使用attr()
。如果在li标记中嵌套了li标记,那么应该更改it@FREAKENGINEER-你希望最终结果是什么?人们会在搜索框中输入什么来隐藏或显示li
?假设用户在输入字段中输入“abc”。。然后将显示数据为arr%abc%的li,其他li将被隐藏。@FREAKENGINEER-没问题,我还添加了一种基于搜索输入过滤li
s的简单方法。它使用jQuery的“工程师”-您希望最终结果是什么?人们会在搜索框中输入什么来隐藏或显示li
?假设用户在输入字段中输入“abc”。。然后将显示数据为arr%abc%的li,其他li将被隐藏。@FREAKENGINEER-没问题,我还添加了一种基于搜索输入过滤li
s的简单方法。它使用jQuery的。