Skip to content

GodahTech/jquery-data-filter

Repository files navigation

GodahTech - Jquery Data Filter JS

Filtrar e atualizar o elemento pelo atributo '.data' ou dados que possuem valor do atributo específico.

Filter and update the element by the '.data' attribute or data that has a specific attribute value.

Godahtech | Soluções Digitais - Roberto W. Godoy.

Version 1.0.9.

🛡 Pode Confiar

godahtech Known Vulnerabilities GitHub issues Check Status npm bundle size GitHub code size in bytes

Website GitHub package.json dependency version (prod) GitHub package.json version npm GitHub npm

📦 Instalação

npm i jquery-data-filter-js

🔨 Usando:

HTML

<div id="person-list">
    <p class="filter-me" data-age="12">
        Henrique, age 12
    </p>
    <p class="filter-me" data-age="15">
        Noop, age 15
    </p>
    <p class="filter-me" data-age="14">
        Raquel, age 14
    </p>
    <p class="filter-me" data-age="14">
        Godoy, age 14
    </p>
    <p class="filter-me" data-city="São Paulo">
        Godoy
    </p>
    <p class="filter-me" data-city="Paraíba">
        Henrique
    </p>
    <p class="filter-me" data-city="Paraíba">
        Goreth
    </p>
    <p class="filter-me" data-city="Paraíba">
        Iracy
    </p>
    <p class="filter-me" data-city="Paraíba">
        Raquel
    </p>
    <p class="filter-me" data-city="São Paulo">
        Leandro
    </p>
</div>

JAVASCRIPT

    $(document).ready(function () {

        console.log($(".filter-me").filterData("person").length);
        //Output: 0

        console.log($(".filter-me").filterData("age").length);
        //Output: 4

        console.log($(".filter-me").filterData("age", 12).length);
        //Output: 1
        
        console.log($(".filter-me").filterData("age", 14).first().text());
        //Output: Raquel, age 14

        console.log($(".filter-me").filterData("age", 14, 10).first().text("Raquel, age 10").text());
        //Output: Raquel, age 10
        
        console.log($(".filter-me").filterData("age", 10).length);
        //Output: 2
        
        console.log($(".filter-me").filterData("age", 14).length);
        //Output: 0

        console.log($(".filter-me").filterData("city").length);
        //Output: 6

        console.log($(".filter-me").filterData("city", "São Paulo").length);
        //Output: 2

        console.log($(".filter-me").filterData("city", "São Paulo").text());
        //Output: Godoy, Leandro

        console.log($(".filter-me").filterData("age", 10).first().text());
        //Output: Raquel, age 10

        console.log($(".filter-me").filterData("city", "Paraíba").eq(2).text());
        //Output: Iracy

    });

🌍 Suporte aos ambientes

  • Navegadores modernos e Internet Explorer 11
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
Electron
IE11, Edge últimas 2 versões últimas 2 versões últimas 2 versões últimas 2 versões últimas 2 versões

🖥 Desenvolvimento

Use Gitpod, um ambiente de desenvolvimento online para GitHub.

Abrir no Gitpod

Ou clone localmente:

$ git clone https://github.com/godoyrw/jquery-data-filter.git
$ cd jquery-data-filter
$ npm install
$ npm start

❤️ Licença e Log de Atualizações

O Jquery Data Filter JS está disponível gratuitamente sob a licença MIT.
Use-o, aprenda com ele, bifurque-o, melhore-o, mude-o, adapte-o às suas necessidades.


  • Version 1.0.9@last
    • Adicionado versionamento separado na pasta "./dist", min.js e min.js.map para debugs.
    • Update o elemento o atributo '.data' ou dados que possuem valor do atributo específico.
    • Filtrar o elemento pelo atributo '.data' ou dados que possuem valor do atributo específico.

  • Version 1.0.8
    • Update o elemento o atributo '.data' ou dados que possuem valor do atributo específico.
    • Filtrar o elemento pelo atributo '.data' ou dados que possuem valor do atributo específico.

  • Version 1.0.7
    • Filtrar o elemento pelo atributo '.data' ou dados que possuem valor do atributo específico.