Home > Article > Web Front-end > How to implement filtering function in jquery

How to implement filtering function in jquery

藏色散人Original: 2021-11-22 11:06:033457browse

How jquery implements the filtering function: 1. Use jquery's appendTo to add the clicked element to the list; 2. Use jquery's clone function to directly remove the content in the attribute list.

The operating environment of this article: Windows7 system, jquery3.2.1, Dell G3 computer.

How to implement filtering function in jquery?

jquery implements filtering function.

Product attribute filtering

Product attribute filtering is a very common function, usually only one attribute of the same type can be selected. For example, price range, or brand, in order to make the selected content look more intuitive, the selection items are generally listed, and have the function of clicking to cancel the selection and clicking to replace the same type.

Two complete implementations are given below.

Implementation 1:

Use jquery's appendTo to add the clicked element to the list item (while checking whether the list item has elements of the same type, if so) Replace it so that it returns to the original list),

Click the element in the list item to return to the original div. In order to return to the original div, a custom attribute is used here.

Naturally, there are certain problems with this implementation. Since the class of the div is restricted to be the same as the id of the parent element, this situation is very inconvenient.

Moreover, it will need to be re-binded every time. event, a recursion. There is a lack of efficiency.

Let’s look at the second idea, which is simpler and clearer. The efficiency will be higher, and the id and class do not need to be the same, and there is no need to rebind multiple events

<!DOCTYPE html>
<html>
<head>
  <title>动画</title>
  <style type="text/css">
    .class1,.class2{
        width: 100px;
        height: 40px;
        margin: 10px;
    }
    #count{
        background-color: sandybrown;
        width: 400px;
        height: 200px;
    }
  </style>
</head>
<body>
<div id=&#39;class1&#39;>
    <button class="class1" data-belong="class1">皮鞋</button>
    <button class="class1" data-belong="class1">凉鞋</button>
    <button class="class1" data-belong="class1">拖鞋</button>
</div>
<div id="class2">
    <button class="class2" data-belong="class2">手套</button>
    <button class="class2" data-belong="class2">皮手套</button>
    <button class="class2" data-belong="class2">毛手套</button>
</div>
<div id="count"></div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
(function check(){
    $(&#39;#class1> button,#class2>button&#39;).off("click").on("click",function(){
        $("#count button."+$(this).attr("data-belong")).appendTo("#"+$(this).attr("data-belong"));
        $(this).appendTo("#count");
        check()
})
    $(&#39;#count  button&#39;).off("click").on("click",function(){
        $(this).appendTo("#"+$(this).attr("data-belong"))
        check()
    })
})()
</script>

Implementation 2:

Use jquery's clone function, In this way, the original list does not need to be modified. Clicking on the content in the attribute list only needs to be removed directly, and the id and class do not need to be consistent.

More free. The code is reduced, there is no recursion, and there is no data modification and binding problem. It is much more optimized than implementation 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
    .class1,.class2{
        width: 100px;
        height: 40px;
        margin: 10px;
    }
    #count{
        background-color: sandybrown;
        width: 400px;
        height: 200px;
    }
    </style>
    <body>
        <div>
            <button class="class1" data-belong="class1">皮鞋</button>
            <button class="class1" data-belong="class1">凉鞋</button>
            <button class="class1" data-belong="class1">拖鞋</button>
        </div>
        <div>
            <button class="class2" data-belong="class2">手套</button>
            <button class="class2" data-belong="class2">皮手套</button>
            <button class="class2" data-belong="class2">毛手套</button>
        </div>
    <div class="count">
    </div>
    </body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//只需保持 button 的 class 标志 和data-belong  一致即可。
    $("div:lt(2) button").click(function(){
        $("div.count ."+$(this).attr(&#39;data-belong&#39;)).remove();
        $(this).clone().appendTo("div.count");
        $(&#39;.count button&#39;).off("click").on("click",function(){
            $(this).remove();
    })
    })
</script>

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to implement filtering function in jquery. For more information, please follow other related articles on the PHP Chinese website!

jquery 递归 class 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Can I add styles using jquery?Next article：Can I add styles using jquery?

See more

How to implement filtering function in jquery

Related articles