2

Bom o que eu quero é simples. Preciso adicionar uma div a cada 3 parágrafos. Lembrando que esses parágrafos estarão em uma outra div (no caso seria a div de conteúdo).

É parecido com a desse site, onde se encontra o anuncio.

Seria assim:

<div class="conteudo">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="anuncio">Div inserida</div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="anuncio">Div inserida</div>
    <p>&nbsp;</p>
</div>
2
  • Podes dar um exemplo do HTML a que te referes? Podes editar a pergunta e juntar o código aqui.
    – Sergio
    Commented 19/04/2016 às 19:49
  • Bom, adicionei o código.
    – Helmesvs
    Commented 19/04/2016 às 19:56

2 Respostas 2

5

Podes selecionar todos os p e depois usar o index deles dentro de um loop para contar/agrupar de três em três. Juntando a isso o .insertAfter tens o que precisas:

$('p').each(function(i) {
    var pos = i + 1;
    if (pos % 3 == 0) {
        $('<div/>', {
            class: 'anuncio',
            text: 'Div inserida!'
        }).insertAfter(this);
    }
});

jsFiddle: https://jsfiddle.net/k26973vz/

8
  • Funcionou perfeitamente. Muito obrigado. Tentei marca como resolvido mas parece que não posso ainda. Vlw
    – Helmesvs
    Commented 19/04/2016 às 20:23
  • Como eu poderia adicionar um script dentro dessa div?
    – Helmesvs
    Commented 19/04/2016 às 20:24
  • @Helmesvs podes dar um exemplo de que script queres correr? Se queres inserir conteúdo de outro website pode ser caso de usar iframe.
    – Sergio
    Commented 19/04/2016 às 20:25
  • É um anuncio: <script type="text/javascript"> <!-- descrColor="666666";titleColor="333333";urlColor="333333";borderColor="FFFFFF";bgColor="FFFFFF";altColor="FFFFFF";coddisplaysupplier="dd7bca939f064a9e89c7863c490e1de2";formatId="1";numads="4";deslabel="post";type="1"; --> </script> <script type="text/javascript" src="http://adrequisitor-af.lp.uol.com.br/uolaf.js"></script>
    – Helmesvs
    Commented 19/04/2016 às 20:27
  • @Helmesvs é isto que procuras? jsfiddle.net/sn0zz83v Desaconselho a ter as variáveis globais dessa maneira. Daria uma pergunta interessante "como configurar/personalizar as variáveis do script".
    – Sergio
    Commented 19/04/2016 às 20:40
3

Pode utilizar uma fórmula (an + b) no seletor para especificar os elementos que deseja selecionar. Nesta fórmula a representa o tamanho ciclo, n é um contador (que começa em 0), e b é um valor de desvio.

Veja mais

$div = $('<div class="anuncio">DIV INSERIDA</div>');
$div.insertAfter('.conteudo p:nth-child(3n+0)');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
  <p>PARÁGRAFO</p>
</div>

1
  • 1
    Boa ideia nth-child(3n+0) como seletor... +1
    – Sergio
    Commented 19/04/2016 às 20:40

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 .