Show only div daughter with jQuery

Asked

Viewed 271 times

-2

I need to attack the div comentarioPost and make only the div of the respective post appear. I simulated some comments to test, then they’ll come from the bank with the other information. How do I do it with jQuery?
I left the div display none in CSS and need to display when someone wants to view comments.

In other words, I need to give a display block Only in the div of the respective post, it’s like a social network and each post has its comments, currently I can display the div but end up being visible, I need to display only the div of the respective post. I’m displaying by PHP even using a loop from while. In case I need to display only the div comentarioPost when I click on the link comentarioPost inside the tag a linkComentario.

This way I can display all Divs, but I wanted to display only the daughter div of the post. 

$(".comentarios").click(function (event) { 
    event.preventDefault(); 
    $(".comentarioPost").css("display", "block"); 
});

Complete code:

<?php
require_once '_funControllers/postagemLinhaDoTempo.php';
require_once '_funControllers/exibePostagensLinhaDoTempo.php';
require_once '_funControllers/select-Dados-User-Logado.php';
?>
<?php do { ?>

    <div class="postagens" id="div<?php echo $exibePostagensAssoc['id_post'] ?>">
        <div class="topPostar"><img class="imgChat" src="uploads/<?php echo exibeImg($exibePostagensAssoc['id_user']) ?>"/><a href="perfil?user=<?php echo $exibePostagensAssoc['id_post'] ?>&nome=<?php echo $exibePostagensAssoc['nome_user'] ?>" title=""><?php echo "<p style='margin-top:6px;float:left;margin-left:10px;'>$exibePostagensAssoc[nome_user]</p>" ?></a>
            <div class="botaoPainel">
                <?php botaoDelete($dadosLogado['U_id'], $exibePostagensAssoc['id_user']) ?>
            </div><!--fecha a div botaoPainel-->
        </div><!--fecha a div topPostar-->
        <div class="meioPostagens">
            <div class="contornoPostagens">
                <!--Verifica se o campo nome na tabela img_postagens tem algum valor ou se é diferente de ''-->
                <?php if (isset($exibePostagensAssoc['nome']) and ( $exibePostagensAssoc['nome'] != '')) : ?> 
                    <a href="home?post=<?php echo $exibePostagensAssoc['id_post'] ?>&postagem=<?php echo imprimeComTracos($exibePostagensAssoc['mensagem_post']) ?>" title="">
                        <img class="imgPostar" src="<?php echo $exibePostagensAssoc['caminho'] . $exibePostagensAssoc['nome'] ?>"/>
                    </a>
                <?php endif; ?>
                <p style="text-align: left"><?php postagem($exibePostagensAssoc['mensagem_post']) ?></p>
            </div> <!--fecha a div contornoPostagens-->
        </div><!--fecha a div MeioPostagens-->
        <div class="rodapePostagens">
            <div class="gostei">
                <img class="imgGostei" id="imgGostei" src="_img/thumb52.png" title="" alt=""/>
                <a class="linkGostei" href="" title="">Gostei + [12<?php echo $i ?>]</a>
            </div><!--fecha a div rodapePostagens-->
            <a class="linkComentario" href="" title="">
                <div class="Comentar">Comentar</div><!--fecha a div Comentar-->
            </a>
            <a class="linkComentario" href="" title="">
                <div class="comentarios">Comentários [258]</div><!--fecha a div comentarios-->
            </a>
        </div><!--fecha a div rodapePostagens-->
        <div class="comentarioPost">
            <p class="internoComentario">Eu não gostei do assunto</p>
            <p class="internoComentario">Estou muito feliz de compartilhar meu primeiro anúncio com vocês meus amigos do site Bom Perfil.</p>
            <p class="internoComentario">Estou muito feliz de compartilhar meu primeiro anúncio com vocês meus amigos do site Bom Perfil.</p>
        </div>
    </div><!--fecha a div postagens-->

<?php } while ($exibePostagensAssoc = mysql_fetch_assoc($exibePostagens)); ?>
</br>
</br>
<a href="#buscaProfissional" class="scroll"><img src="_img/walking18.png" title="Voltar ao topo">&nbsp;Voltar ao topo</a></br>
jquery html css

  • What format do you get this from the server? Via AJAX?

  • Can you use another word instead of "attack"? It’s not very clear what that means... you mean delete, or select?

  • I’m needing to give a display block only in the post div darespectiva, it’s like a social network and each post has its comments, currently I can display the div but end up being visible, I need to display only the div of the respective post. I’m displaying by php even using a While loop. In case I need to display only the 'comment' div when I click on the 'comment' link that is inside the 'link' linkComentario'

  • I understood correctly that these data nay come by ajax but yes when the page loads? In that case you should solve it on the server side. How is the code on the server?

  • This way I can display all the Divs, but I wanted to display only the div daughter of the post. $(".comentarios").click(function (event) {&#xA; event.preventDefault();&#xA; $(".comentarioPost").css("display", "block");&#xA; });

  • Bruno, I added your explanations to the question. Instead of putting this here in the comments, it’s just you [Dit] the question clarifying the doubts and then warns with an arroba, like "@Sergio, I edited the question to answer your question". You will always receive warnings about your posts, but to notify other users you need the arroba. You are free to edit the question whenever it is necessary to improve it. And welcome to Sopt!

Show 1 more comment

2 answers

1

You could assign a data-attribute to link each post to your comments. For example:

<a class="linkComentario" href="" title="">
    <div class="comentarios" data-postid="<?= $exibePostagensAssoc['id_post'] ?>">Comentários [258]</div><!--fecha a div comentarios-->
</a>
<div class="comentarioPost" data-postid="<?= $exibePostagensAssoc['id_post'] ?>">...</div>

And select the comments like this:

$(".comentarios").click(function (event) {
    event.preventDefault();
    $('.comentarioPost[data-postid="' + $(this).attr('data-postid') + '"]').css("display", "block");
});

I didn’t test it, but I think it works.

  • I’ll test and warn you Brendo, but thanks for the help, and also with Sergio.

  • Not accepting the data-postid Rs function is stating that the function is not allowed in the version I am using.

  • What version are you using?

  • It worked like this brother $(".postagens .comentarios .linkComentario"). click(Function (Event) { Event.preventDefault(); $(this).parents('.posts').find('.commentPost').css("display","block"); });

  • Man, sorry. I had forgotten to put the $ before the variable name. I did copying and pasting and didn’t even notice. Try again.

1

I added an id to div to see if it helps.

I like it + [12] Comment on 

        <div class="comentarios" ><a id="<?php echo $exibePostagensAssoc['id_post'] ?>" class="linkComentario" href="" title="">Comentários [258]</a></div><!--fecha a div comentarios-->
        </div><!--fecha a div rodapePostagens-->
        <div class="comentarioPost" id="<?php echo $exibePostagensAssoc['id_post'] ?>">
            <p class="internoComentario">Eu não gostei do assunto</p>
            <p class="internoComentario">Estou muito feliz de compartilhar meu primeiro anúncio com vocês meus amigos do site Bom Perfil.</p>
            <p class="internoComentario">Estou muito feliz de compartilhar meu primeiro anúncio com vocês meus amigos do site Bom Perfil.</p>
        </div>

  • It worked so personal. $(".postagens .comentarios .linkComentario"). click(Function (Event) { Event.preventDefault(); $(this).parents('.posts').find('.commentPost').css("display","block"); }); Thank you all

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.