1

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?

1
  • 2
    Pode colocar parte do HTML, pois para construir o que pede leva-se em consideração a estrutura onde estão os parágrafos, ou se existe um ID, ou classe, etc etc etc..
    – David
    Commented 7/06/2018 às 15:21

3 Respostas 3

3

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>

5
  • .after até quem arranha inglês desconfia o que seja, agora .eq o que seria ?(coisa que vem montado em equino?) rsrs
    – user60252
    Commented 7/06/2018 às 15:47
  • rs.. Acho que vem de "equal"... pq tem o seletor .gt() que deve significar "greater than" (maior que)...
    – Sam
    Commented 7/06/2018 às 15:53
  • 1
    agora merolho, rs +1
    – user60252
    Commented 7/06/2018 às 16:04
  • 1
    Prestando bem atenção, vc fala de .eq (ponto eq) e no código está :eq (dois pontos eq), e ai?
    – user60252
    Commented 7/06/2018 às 16:11
  • As duas coisas são praticamente a mesma coisa, mas vc está certo, e corrigi o link.
    – Sam
    Commented 7/06/2018 às 16:15
1

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.

0

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ão Run tests nessa página eq vs eq()

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .