How to dynamically generate and access div's

Question

How to dynamically generate and access div's

Navigation

#1 by (0 votes)

0

I'm trying to build a preview of images, but I need each one to be independent, I'm facing a problem that I can not solve. I need to access id's dynamically with JQuery, can anyone give a light?

Code below for review:

<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>

In this case it would be several images and in jquery I needed to make each one unique and that I could access them through the id:

For example I have the id "description", in jquery would have the click of the button description and when it was open, it would have to open independent of the other box, I do not know to explain kkkkk right, but I would like to generate dynamically and to be able to access every an independent one in jquery. How do I do that? could anyone help?

javascript jquery

asked by anonymous 11.03.2017 / 15:52

1 answer

Format Java Number Call to a member function prepare () on a non-object in /var/www/estudos/estudentsCRUD/classes/cliente.php l on line 24

score 0 · Accepted Answer

Fábio,

With jQuery you do not necessarily need to work with 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:

Removed ids from "description" elements

I've changed the div to see the uncorrected div for a a element (I put two a, because one has the animated example and the other does not).

I inserted common attributes into the objects to be manipulated, in this case I used css classes as a selector

I registered click events in jQuery

Notice that the manipulation of the elements was without using IDS but rather common attributes. It would not 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>