0

我有一个 ID 为“#menu-main”的 UL，每个子 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&nbsp;
                    </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&nbsp;
                    </li>
                </a>
        </li>

    </ul>
4

3 回答 3

3

这应该适合你：

$('#menu-main li').hide().filter('[data-arr="royal preloader"]').show();

要根据搜索输入轻松添加过滤器，只需使用以下命令：

$('#s').on('keyup', function(){
    $('#menu-main > li').hide().filter("[data-arr*='"+this.value+"']").show();
});
于 2013-09-02T19:08:59.413 回答
1 
$( '#menu-main' ).children( 'li' ).each( function ( i, el ) { 
    var el$ = $( el );
    if ( el$.data( 'arr' ) == 'royal preloader')
        el$.show();
    else
        el$.hide();
} );
于 2013-09-02T19:09:51.700 回答
1

尝试这个

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 标签，这是错误的，您应该更改它

于 2013-09-02T19:10:11.090 回答