PReciso passar um script a um site aonde no conteudo, entre o 3 e o 4 paragrafo, apareça uma publicidade.
Consigo ler qual o 3 paragrafo de um texto e inserir uma DIV apos ela, com JS ou JQUERY?
PReciso passar um script a um site aonde no conteudo, entre o 3 e o 4 paragrafo, apareça uma publicidade.
Consigo ler qual o 3 paragrafo de um texto e inserir uma DIV apos ela, com JS ou JQUERY?
Pode pegar o parágrafo usando .eq(índice)
e inserir algo após ele usando .after()
.
Se o container for uma div
qualquer, pegando pelo id
:
$(function(){
var pub = '<div class="pub">publicidade</div>';
$("#div p:eq(2)").after(pub);
});
// eq(0) = 1º elemento
// eq(1) = 2º elemento
// eq(2) = 3º elemento ←
// eq(3) = 4º elemento
p{
background: yellow;
}
.pub{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
<p>parágrafo 1</p>
<p>parágrafo 2</p>
<p>parágrafo 3</p>
<p>parágrafo 4</p>
</div>
Se o container for o próprio body
:
$(function(){
var pub = '<div class="pub">publicidade</div>';
$("p:eq(2)").after(pub);
});
// eq(0) = 1º elemento
// eq(1) = 2º elemento
// eq(2) = 3º elemento ←
// eq(3) = 4º elemento
p{
background: yellow;
}
.pub{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>parágrafo 1</p>
<p>parágrafo 2</p>
<p>parágrafo 3</p>
<p>parágrafo 4</p>
.after
até quem arranha inglês desconfia o que seja, agora .eq
o que seria ?(coisa que vem montado em equino?) rsrs
.gt()
que deve significar "greater than" (maior que)...
.eq
(ponto eq) e no código está :eq
(dois pontos eq), e ai?
Se eu entendi bem, levando em conta que seus parágrafos estejam dentro de algum container com um identificador, da para fazer com Jquery
da seguinte forma:
var div = $('<div> Essa é a DIV de propaganda! </div>');
$('.main').find('p:nth-child(3)').after(div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main">
<p> 1º Parágrafo! </p>
<p> 2º Parágrafo! </p>
<p> 3º Parágrafo! </p>
<p> 4º Parágrafo! </p>
</section>
Basta localizar o terceiro parágrafo e após ele, usar a função after()
para inserir a sua div.
Pode pegar o parágrafo usando :eq(índice)
e inserir algo após usando .after()
.
$( "body" ).find( "div" ).eq( 2 ).addClass( "aliceblue" );
$(function(){
var container = '<div>publicidade</div>';
$("p:eq(2)").after(container);
});
$( "div" ).eq(1).css( "background-color", "yellow" );
$( "div:eq(0)" ).css( "color", "red" );
div {
margin: 10px;
float: left;
border: 2px solid blue;
}
.aliceblue {
background:aliceblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>zero</div>
<div>um</div>
<div>dois
<p>parágrafo 1</p>
<p>parágrafo 2</p>
<p>parágrafo 3</p>
<p>parágrafo 4</p>
</div>
<div>tres</div>
<div>quatro</div>
repare que
.eq
e:eq
fazem basicamente a mesma coisa. A diferença entre eles pode ser vista nesse post (ingles) clicando no botãoRun tests
nessa página eq vs eq()