Olá a todos! Bom estar de volta ao 100loop.

Indo direto ao assunto, hoje vamos ver como é simples fazer o encadeamento no jQuery usando jQuery.fn.extend. Pra isto vamos criar um método muito útil não nativo do jQuery, outerHTML().

Diferença Entre jQuery.fn.extend e jQuery.extend

jQuery.fn.extend extende o jQuery adicionando métodos em cadeia enquanto o jQuery.extend extende jQuery adicionando uma função. Métodos são acessados diretamente pelo DOM.

Criando o Método outerHTML

Primeiro adicione a estrutura básica de extensão do jQuery:

(function($){
    $.fn.extend({
        // O código vem aqui
    })
})(jQuery);

Agora adicione o método. Neste caso o outerHTML() que receberá o elemento e todo o seu conteúdo, diferente do método html() que recebe apenas o conteúdo do elemento:

(function($){
    $.fn.extend({
        outerHTML: function(){
                return $("<div />").append($(this).clone()).html();
        }
    });
})(jQuery);

Note que o return no método é essencial para a extensão do código.

Chamando o outerHTML

Considere o seguinte HTML:

  • Cruzeiro Campeão Brasileiro 2010
  • Cruzeiro Campeão da Libertadores 2011

Chame a tag ul:

$(document).ready(function(){
    alert($(".raposa").children().css("border","1px solid #00F").outerHTML());
});

O alert irá mostrar o HTML com toda a lista com os próximos títulos do Cruzeiro e uma borda azul será adicionada nos itens da lista.

Por hoje é só. Um beijo do gordo.

veja o exemplo funcionando.