需要Jquery列表过滤帮助

时间:2015-03-26 20:56:39

标签: javascript jquery html

您好我想更改列表过滤的一个小功能而不是过滤 li ,我想扫描包含相同列表的div的多个 ul 标记其中的物品 怎么可能用呢

这是我的js代码

$( document ).ready(function() {
  $('#s').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    $('.domain_pricing_list>li').each(function(){
     var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();            
   });
  });
});

这是我的HTML

<input placeholder="Search..." id="s" type="text" /> 
<div class="domain_pricing_list">
    <ul>
        <li><span>TLD</span>.com</li>
        <li><span>Duration</span>1 Year</li>
        <li><span>Registration</span>$10</li>
        <li><span>Renewal</span>$10.45</li>
        <li><span>Transfer</span>$10.33</li> 
    </ul>

    <ul>
        <li><span>TLD</span>.net</li>
        <li><span>Duration</span>1 Year</li>
        <li><span>Registration</span>$10</li>
        <li><span>Renewal</span>$10.45</li>
        <li><span>Transfer</span>$10.33</li> 
    </ul>

    <ul>
        <li><span>TLD</span>.org</li>
        <li><span>Duration</span>1 Year</li>
        <li><span>Registration</span>$10</li>
        <li><span>Renewal</span>$10.45</li>
        <li><span>Transfer</span>$10.33</li> 
    </ul>    
</div>

1 个答案:

答案 0 :(得分:0)

CSS选择器不正确。它应该是:

$('.domain_pricing_list > ul >li')

.domain_pricing_list > li表示直接与.domain_pricing_list&#34;元件。根据你的HTML,没有这样的孩子。 .domain_pricing_list的直接后代是ul标记。

演示: http://jsfiddle.net/06kvcmqq/