Utilizando o seletor each do JQuery para percorrer elementos

 

Neste post  irei demonstrar como pesquisar de forma dinâmica todos os elementos que você desejar utilizando o framework do JQuery,  o que faz você economizar algumas linhas de código caso utilize o javascript puro.

Como exemplo irei criar uma página em HTML que utilizará jquery para percorrer todos os elementos DOM (Document Object Model) e alterar a cor de todas as divs do documento após o evento click do botão.. Vamos por a mão na massa (melhor dizendo, no teclado).

 

Segue o código HTML completo da página:

<html>
    <head>
        <style type="text/css" media="all">
            p { cursor:pointer; color:#00f;}
            div {width: 200px; height: 100px; border: 1px solid #000; margin: 20px;}
        </style>
        <script type="text/javascript" src="jquery-1.6.4.js"></script>
        <script type="text/javascript">
            // Quando o documento estiver sido carregado
            $(document).ready(function(){

                // Quando o botão for clicado
                $(‘button’).click(function(){
                    // pesquisa de todos os elementos ‘div’ na página
                    $(‘div’).each(function(i){
                        // Aplica a cor de fundo
                        $(this).css(‘background’, ‘red’);
                    });
                });
            });
        </script>
        <title>Seletor each do JQuery</title>
    </head>
    <body>
        <h2>Seletor each do JQuery em ação.</h2>
        <div>
            Div 1.
        </div>
        <p>Lista ordenada:</p>
        <ol>
            <li>Item 1;</li>
            <li>Item 2;</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ol>
        <div>
            Div 2.
            <p>Paragráfo div;</p>
        </div>
        <button type="button">Colorir divs</button>
    </body>
</html>

O seletor each() vai percorrer todos os elementos da página  em busca das divs, para aplicar o novo estilo CSS.

Dúvidas quanto à sintaxe das funções, pode consultar a vasta documentação do jquery, onde contém diversos exemplos das mesmas.

 

Até a próxima.

Anúncios

3 thoughts on “Utilizando o seletor each do JQuery para percorrer elementos

  1. Olá Elexsandro! Ótimo post! E como ficaria no caso de percorrer as linhas de uma tabela e numerar sequencialmente cada uma delas?
    Fiz algumas modificações no seu exemplo mas não deu certo… Obrigado!

    1. Já resolvi. Era vacilo meu. Usando o fadeOut() eu só as ocultava, e minha função de renumerar funcionava até para a linha oculta. Usei o remove() e agora funcionou. Valeu.

      1. Que bom que você gostou desta postagem.
        No caso de numerar sequencialmente as linhas de uma tabela, você pode também fazer da seguinte forma entre diversas outras:


        $(document).ready(function(){
        var i = 0;
        // Quando o botão for clicado
        $('button').click(function(){
        // Percorre todas as linhas da tabela
        $('table tr').each(function(i){
        // Adiciona uma

        com o número corrente
        $(this).append(" " + (++i) + "

        ");
        });
        });
        });

        Abraços.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s