jQuery – Os métodos before() e after()

No capítulo anterior, nós usamos os métodos append() e prepend() para inserir coisas dentro de um elemento, mas em alguns casos, nós precisamos inserir coisas antes ou depois de um ou vários elementos em vez disso. O jQuery tem os métodos befoer() e after() apenas para esse propósito, e eles são tão fáceis de usar. Veja esse exemplo:

<a href="javascript:void(0);" onclick="$('input.test1').before('<i>Before</i>');">Before</a>   
<a href="javascript:void(0);" onclick="$('input.test1').after('<b>After</b>');">After</a>
<br /><br />
<input type="text" value="Input 1" name="txtInput1" /><br />
<input type="text" value="Input 2" name="txtInput2" /><br />

Dependendo em qual dos dois links você clicou, uma tag itálico ou uma negrito será inserida antes ou depois de cada elemento input na página usando a classe “test1”. Assim como append() e prepend(), ambos after() e before() permitem você usar strings HTML, elementos DOM e objetos jQuery como parâmetros e uma quantidade infinita deles também. Nós vamos demonstrar isso no próximo exemplo:

<a href="javascript:void(0);" onclick="InsertElements();">Insert elements</a>
<br /><br />
<span id="spnTest2">Hello world? </span>
<script type="text/javascript">
function InsertElements()
{
        var element1 = $("<b></b>").text("Hello ");
        var element2 = "<i>there </i>";
        var element3 = document.createElement("u");
        element3.innerHTML = "jQuery!";   
        $("#spnTest2").after(element1, element2, element3);
}
</script>

Neste exemplo, nós criamos um objeto jQuery, uma string HTML e um elemento JavaScript DOM, e então nós usamos o método after() para inserir todos eles depois da nossa tag span. Claro, o método before() poderia ter sido usado exatamente da mesma maneira.

Existem variações dos métodos before() e after(), chamados insertBefore() e inserAfter(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então ao invés de os chamarem nos elementos que devemos inserir dados antes ou depois, com um parâmetro do que é para ser inserido, você faz exatamente o oposto. Qual método usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="InsertElementsBefore();">Insert elemenets</a>
<br /><br />
<span id="spnTest3">Hello world? </span>
<script type="text/javascript">
function InsertElementsBefore()
{       
        $("#spnTest3").before($("<i></i>").text("before() "));
        $("<b></b>").text("insertBefore() ").insertBefore("#spnTest3");
}
</script>

Neste exemplo, nós inserimos os itens antes da tag span, mas você poderia com certeza fazer exatamente a mesma coisa usando after() e insertAfter(), se você deseja inserir depois do elemento alvo. Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazermos difere.

Fonte: jquery-tutorial.net

Anúncios

About Gustavo Amaro

+ Formado em Tecnologia e Análise de Sistemas + MBA em Desenvolvimento de Aplicações JAVA – SOA

Posted on 13 de Março de 2014, in JavaScript, jQuery and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. Deixe um comentário.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: