Question

平，我是jquery家族的新人......现在我试图从列表中找到一个元素并淡出其他元素。 ......我这样做有问题。 *这是我的HTML代码：

   <div class="feature-input">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
          <button class="btn btn-default add-feature-btn" type="button">Find</button>
        </span>
      </div><!-- /input-group -->
    </div><!--feature-input-->

    <div class="features-list">
      <ul id="the-feature-list" class="feature-list-ul">
        <li>Feature 1 </li>
        <li>Feature 2 </li>
        <li>Feature 3 </li>
        <li>Santa</li>
        <li>Bunny </li>
        <li>Something </li>
        <li>Feature 7 </li>
        <li>Feature 8</li>
      </ul>
    </div><!--featrue-list -->
    </div><!--features-->

*这是我的jquery脚本：

  $(".feature-input input").on("keyup", function(e){

        var v = $(this).val();
    if(v){

        $(".feature-list ul li.not-chosen").fadeOut(50);
        $(".feature-list ul li.not-chosen").each(function(){
            if ($(this).text().toLowerCase().match(v.toLowerCase())) 
            {
                $(this).fadeIn(100);
            }
        });
     }
        else{
             $(".feature-list ul li.not-chosen").fadeIn(50);      
    }

  });

你能告诉我我在做什么吗？错了，它开始让我发疯。我正在寻找新的方法来做到这一点，我将感谢任何形式的帮助。 ...

Answer 1

您有不正确的选择器来定位li元素。使用方法：

$(".feature-input input").on("keyup", function(e){
    var v = $(this).val();
if(v){

    $(".features-list ul li").fadeOut(50);
    $(".features-list ul li").each(function(){
        if ($(this).text().toLowerCase().match(v.toLowerCase())) 
        {
            $(this).fadeIn(100);
        }
    });
 }
    else{
         $(".features-list ul li").fadeIn(50);      
}
});

<强> Working Demo

Answer 2

更改此行：＆＃34; $（＆＃34; .feature-list ul li.not-selected＆＃34;）。fadeOut（50）;＆＃34;到

    $(".feature-list ul li").fadeOut(50);

这意味着fadeOut之前所有的li元素在fadeIn中所需的/这个li。

jQuery：从列表中查找元素并淡出其余部分

2 个答案: