Question

https://plnkr.co/edit/Hcdp24jLgdlOv2NlqyIG?p=preview

您好

我正在尝试使用仅过滤功能过滤我的li。我有一个按钮（过滤文字）。当我点击按钮时，我只想显示{{1} }有类abc。我试过这个

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-2.0.3.js"></script>
    <style>
        ul {
            list-style: none;
            cursor: pointer;

        }

        .tabItem li {
            float: left;
            padding: 20px;
        }

        .tabItem li.active {
            color: red;
        }

        .clear {
            clear: both;
        }

        .hideDiv{
            display: none;
        }

    </style>
</head>
<body>


<button class="filter">filler</button>
<ul class="item">
    <li class="äbc">123</li>
    <li class="pp">12</li>
    <li class="äbc">78</li>
    <li class="äc">13</li>
</ul>
<script>
    $(function () {


        $('.filter').click(function () {
            var $items = $('.item li');
            //$items.hide().filter(filterClasses.join('')).show();
            var $newItem =$items.filter(function (i,item) {
                console.log(i)
                console.log(item)
                return $(item).hasClass('abc')
            })
            $($newItem).show();
        });

    });
</script>
</body>
</html>

预期输出

123

78

Answer 1

只需使用，

$('.item li[class=abc]').show(); // Let it is abc not äbc

＆＃13;

$(function() {
  $('.filter').click(function() {
    $('.item li').hide(); // hide all first
    $('.item li[class=abc]').show(); // then show only which are having abc class
  });
});

＆＃13;

ul {
  list-style: none;
  cursor: pointer;
}

.tabItem li {
  float: left;
  padding: 20px;
}

.tabItem li.active {
  color: red;
}

.clear {
  clear: both;
}

.hideDiv {
  display: none;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>



<button class="filter">filler</button>
<ul class="item">
  <li class="abc">123</li>
  <li class="pp">12</li>
  <li class="abc">78</li>
  <li class="ac">13</li>
</ul>

＆＃13;

要匹配以bc结尾的所有匹配项，请使用Ends-with-selector之类的，

＆＃13;

$(function() {
  $('.filter').click(function() {
    $('.item li').hide(); // hide all first
    $('.item li[class$=bc]').show(); // then show only which ends with bc in class name
  });
});

＆＃13;

ul {
  list-style: none;
  cursor: pointer;
}

.tabItem li {
  float: left;
  padding: 20px;
}

.tabItem li.active {
  color: red;
}

.clear {
  clear: both;
}

.hideDiv {
  display: none;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>



<button class="filter">filler</button>
<ul class="item">
  <li class="äbc">123</li>
  <li class="pp">12</li>
  <li class="äbc">78</li>
  <li class="äc">13</li>
</ul>

＆＃13;

使用filter但条件return $(item).hasClass('abc') || $(item).hasClass('äbc')

＆＃13;

$(function() {
  $('.filter').click(function() {
    var $items = $('.item li');
    var $newItem = $items.hide() // hide all first
      .filter(function(i, item) {
        console.log(i);
        console.log(item);
        return $(item).hasClass('abc') || $(item).hasClass('äbc')
      });
    $($newItem).show();
  });
});

＆＃13;

ul {
  list-style: none;
  cursor: pointer;
}

.tabItem li {
  float: left;
  padding: 20px;
}

.tabItem li.active {
  color: red;
}

.clear {
  clear: both;
}

.hideDiv {
  display: none;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>

<button class="filter">filler</button>
<ul class="item">
  <li class="äbc">123</li>
  <li class="pp">12</li>
  <li class="äbc">78</li>
  <li class="äc">13</li>
</ul>

＆＃13;

Answer 2

请注意，äbc AND abc 不相等。我的猜测是你打算对类名称说 abc ，如果是这种情况，这是一个快速的解决方案。希望它有所帮助！

    $(function () {
        $('.filter').click(function () {
            var $items = $('.item li');
            var $newItem =$items.filter(function (i,item) {
                return !$(item).hasClass('abc');
            });
            $($newItem).hide();
        });
    });

ul {
            list-style: none;
            cursor: pointer;

        }

        .tabItem li {
            float: left;
            padding: 20px;
        }

        .tabItem li.active {
            color: red;
        }

        .clear {
            clear: both;
        }

        .hideDiv{
            display: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<button class="filter">filler</button>
<ul class="item">
    <li class="abc">123</li>
    <li class="pp">12</li>
    <li class="abc">78</li>
    <li class="ac">13</li>
</ul>

Answer 3

你需要隐藏未经过滤的li，试试这个

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-2.0.3.js"></script>
    <style>
        ul {
            list-style: none;
            cursor: pointer;
        }

        .tabItem li {
            float: left;
            padding: 20px;
        }

        .tabItem li.active {
            color: red;
        }

        .clear {
            clear: both;
        }

        .hideDiv{
            display: none;
        }

    </style>
</head>
<body>


<button class="filter">filler</button>
<ul class="item">
    <li class="äbc">123</li>
    <li class="pp">12</li>
    <li class="äbc">78</li>
    <li class="äc">13</li>
</ul>
<script>
    $(function () {
        $('.filter').click(function () {
            var $items = $('.item li');
            //$items.hide().filter(filterClasses.join('')).show();
            var $newItem =$items.filter(".äbc");
		$($items).hide();
            	$($newItem).show();
        });

    });
</script>
</body>
</html>

Answer 4

尝试$ items.not（'。abc'）。hide（）来实现你想要的

$(function() {
  $('.filter').click(function() {
    var $items = $('.item li');
    $items.not('.abc').hide();
  });
});

以下是工作代码：https://plnkr.co/edit/zutgyWjYbRoE0mnUOvE2?p=preview

为什么过滤功能不适用于li？

4 个答案: