How to dynamically generate and access div’s

Asked

Viewed 61 times

0

I’m trying to put together an image preview, but I need each one to be independent, I’m facing a problem that I can’t solve. I need to access id’s dynamically with Jquery, someone can give a light?

Code below for analysis:

<div id="container_principal">

                                <div class="box_principal">
                                    <div id="enviado_por">Enviador por: Usuario 1</div>
                                    <div id="img_foto_1"></div>
                                    <div id="img_foto_2"></div>
                                    <div id="img_foto_3"></div>
                                    <div id="btn_abrir_descricao">Ver Descrição</div>
                                    <div id="descricao">fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds aaa</div>   
                                </div>

                                <div class="box_principal">
                                    <div id="enviado_por">Enviador por: Usuario 2</div>
                                    <div id="img_foto_1"></div>
                                    <div id="img_foto_2"></div>
                                    <div id="img_foto_3"></div>
                                    <div id="btn_abrir_descricao">Ver Descrição</div>
                                    <div id="descricao">fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds aaa</div>   
                                </div>
</div>

Then there would be several images and in jquery I needed to make each one unique and that I could access them by id:

There for example I have there the id "description", in jquery I would have the button click description and when I opened, I would have to open independent of the other boxes, I do not know explain right kkk, but I would like to generate dynamically and be able to access each independent in jquery. How do I do that? Someone could help?

javascript jquery

  • How are you generating this HTML?

1 answer

0


Fabius,

With jQuery you don’t need to work with the ids. In this case, you can use something in common to select the elements. (even in your example it is not right to declare the same id more than once)

I made some changes to your html:

  1. I removed the ids of the elements "description"
  2. I switched the div from seeing detachments to an element a (I put two to, because one has the animated example and the other not).
  3. I inserted common attributes into objects that will be manipulated, in this case I used css classes as selector
  4. I registered the click events on jQuery

Note that the manipulation of the elements was not using IDS but common attributes. It wouldn’t necessarily have to be the class, it could be any other jQuery selector.

<html>
<body>

    <div id="container_principal">

        <div class="box_principal">
            <div id="enviado_por">Enviador por: Usuario 1</div>
            <div id="img_foto_1"></div>
            <div id="img_foto_2"></div>
            <div id="img_foto_3"></div>
            <a href="#" class="btn-descricao">Ver/ocultar Descrição</a><br />
            <a href="#" class="btn-descricao2">Ver/ocultar Descrição com animação</a>
            <div class="descricao" style="display: none">fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds aaa</div>
        </div>

        <div class="box_principal">
            <div id="enviado_por">Enviador por: Usuario 2</div>
            <div id="img_foto_1"></div>
            <div id="img_foto_2"></div>
            <div id="img_foto_3"></div>
            <a href="#" class="btn-descricao">Ver/ocultar Descrição</a><br />
            <a href="#" class="btn-descricao2">Ver/ocultar Descrição com animação</a>
            <div class="descricao" style="display: none">fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds fddsfdsdsffds aaa</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>

    <script>

        $(".btn-descricao").on("click", function (e) {
            e.preventDefault(); //Evita que o <a> execute o location.
// A função siblings() busca o elemento "irmão" do objeto clicado.
// A função toggle() exibe o objeto se estiver oculto ou oculta o objeto se estiver visivel.
            $(e.currentTarget).siblings('.descricao').toggle(); 
        });

        $(".btn-descricao2").on("click", function (e) {
            e.preventDefault(); //Evita que o <a> execute o location.
// A função siblings() busca o elemento "irmão" do objeto clicado.
// A função slideToggle() faz a mesma coisa que a função toggle(), mas com a animação estilo "slide"
            $(e.currentTarget).siblings('.descricao').slideToggle();
        })

    </script>

</body>
</html>

  • It worked properly, thank you Ericson, with the event . on("click, Function)

Browser other questions tagged javascript jquery

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