jQuery: qual é a diferença entre depois () e insertafter ()
-
19-09-2019 - |
Pergunta
JQuery tem um .after()
método, e também um .insertAfter()
método.
Qual é a diferença entre eles? Eu acho que posso usar .after()
para inserir elementos após um elemento selecionado (ou elementos). Isso está certo? O que é .insertAfter()
por?
Solução
Eles são opostos mútuos.
'depois'Insira o argumento após o seletor.
'insertafter'Insira o seletor após o argumento.
Aqui está um exemplo da mesma coisa feita com:
insertafter ():
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $( "<p>Test</p>" ).insertAfter( ".inner" ); Each inner <div> element gets this new content: <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>
depois():
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $( ".inner" ).after( "<p>Test</p>" ); <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>
Outras dicas
Eles são inversos um do outro. Conforme explicado no jQuery documentação:
Este:
$("p").insertAfter("#foo");
É o mesmo:
$("#foo").after("p");
E, finalmente, o InsertAfter retorna todos os elementos inseridos, enquanto que .AFter () retornará o contexto em que é chamado.
Todas as respostas até agora são claras como lama ;-) (Então também vou fazer uma facada!)
Se você começar com este HTML:
<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>
Depois insere alguns novo Conteúdo após as tags correspondentes:
$("p") // Match all paragraph tags
.after("<b>Hello</b>"); // Insert some new content after the matching tags
O resultado final é:
<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>
Por outro lado, Insertafter move um ou mais elementos que já existem no DOM Após os elementos selecionados (Realmente, esse método poderia ser chamado Moveafter):
$("#sMore") // Find the element with id `sMore`
.insertAfter("#pOne"); // Move it to paragraph one
Resultando em:
<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>
( depois antes ):
$('selector').after('new_content');
$('selector').before('new_content');
while (insertafter e insertbe antes):
$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');
$("p").insertAfter("#foo");
==
$("#foo").after("p")
Depois (conteúdo) retorna: jQuery
Insira o conteúdo após cada um dos elementos correspondentes.
Insertafter (seletor) Retornos: jQuery
Insira todos os elementos correspondentes após outro, especificado, conjunto de elementos.
Parece também que os atributos de aprovação do elemento inserido não funcionam com ".Insertafter", mas funciona com ".After"
funciona:
$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });
não funciona:
$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');
*Editar: Parece que não funciona com ". Depois" nem, mas apenas com ".Appendto"
Aqui Você pode encontrar um tutorial muito bom de como adicionar conteúdo a uma página usando os métodos jQuery precend (), precendto (), append (), appendto (), antes (), insertBefore (), depois (), insertafter ( ), wrap (), wapall () e wrapinner ()
Depois() e Insertafter () Ambos anexam um elemento, a grande mudança virá para acorrentar
Dentro after()
Você está anexando o novo elemento após o seu seletor e, se estiver usando a corrente para o elemento, qualquer função que você usou disparará no selector
não no elemento recém -adicionado, e o oposto será realizado em insertAfter()
em que o encadeamento será realizado no elemento recém -adicionado, por exemplo,
Depois() e Insertafter ()
Html
<div class="after">After Div</div>
------------------------------------------------------
<div class="insertafter">Insert after div</div>
ROTEIRO
var p='<p>Lorem ipsum doner inut..</p>';
$('.after').after(p)//chaining, performed on .after div not on p
.css('backgroundColor','pink');
//you can chain more functions for .after here
$(p).insertAfter('.insertafter')//chaining, performed on p not on .insertafter div
.css('backgroundColor','yellow');
// here you can chain more functions for newly added element(p)
Veja acima do selector
e contents
estão mudando nas duas funções. O mesmo se aplicará na lista de seguintes:
- antes () vs insertBefore ()
- append () vs AppendTo ()
- precend () vs precendto ()
- e depois () vs insertafter (), obviamente.
Se você quiser ver os dois, em termos de desempenho, então after()
é mais rápido que insertAfter()
Ver Pós-VS-Insertafter-Performance.
Uma coisa importante separa alguma sintaxe é que o vazamento e o desempenho da memória. O Instafter é mais eficiente do que a inserção quando você tem toneladas de elementos DOM. Portanto, prefira o InsertAfter em vez de depois.