How to pass an index to the element according to its position?

Question

How to pass an index to the element according to its position?

Navigation

#1 by (0 votes)

0

I'm loading data from an external api with json and jquery, with every ajax request a div with the class item, a div with the class more_info and a see button, which loads the rest of the data, and the created divs receive the json data. From line 28 jquery hides the div more_info, and the button created with the class bt_ver_more receives the toggle function, to open the rest of the information on the same screen. The problem is that when I click on one of the generated buttons to see more, all buttons execute the toggle function, opening up the rest of the information from all the divs, being obvious, since everyone has the same class but I do not want it this happens, I want it to click the button, it opens the div .more_info of its div, not all other divs

//Carrega dados de um arquivo json 
var elemento;
  $(document).on('click','#bt_prosseguir', function(){
    $.getJSON('https://upvagasweb.000webhostapp.com/api_upvagas/php_json_access/access_json_aparecida.php', function(result){
        elemento = "<div class='list radius white'>";
        $.each(result, function(i, valor){
        elemento += "<div class='item'>";
        elemento += "<div class='left'>";
        elemento += "<img class='avatar radius' src='"+valor.logo_empresa+"'>";
        elemento += "</div>";
        elemento += "<h2 style='margin-left:40%;'><strong>"+valor.setor+"</strong></h2>";
        elemento += "<p style='margin-left:40%;'>"+valor.empresa+"</p>";
        elemento += "<p style='margin-left:40%;'> Por "+valor.vinculo+"</p>";
        elemento += "<p class='text-grey-500' style='margin-left:40%;'>"+valor.cidade+" - SP</p>"; 
        elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
        elemento += "<div class='more_info'>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>"+valor.beneficios+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>"+valor.remuneracao+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>"+valor.nivel_estagio+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>"+valor.processo_seletivo+"</p>";
        elemento += "</div>";
        //elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
        elemento += "</div>";   
        });
        $('#feed_vagas').html(elemento);

        //esconde a div more_info
          $('.more_info').hide();
          $('.bt_ver_mais').click( function(){     
            $('.more_info').toggle(); 
        });
    });
});


/*$(document).on('deviceready', function(){
    load_feed();
 });*/

html jquery ajax

asked by anonymous 24.11.2018 / 22:48

1 answer

how to filter repeated values in php the result of a search in the database Error in AJAX request for server Node.js. (readyState: 0 and status: 0)

score 0 · Accepted Answer

Change the click event to find only the .more_info div that has the same ancestor with the class .item of .bt_ver_mais clicked:

$('.bt_ver_mais').click( function(){
  $(this) // elemento clicado
  .closest('div.item') // ancestral comum
  .find('.more_info') // busca o elemento que será exibido
  .toggle(); // exibe/oculta o elemento
});

Example:

//Carrega dados de um arquivo json 
var elemento;
$(document).on('click','#bt_prosseguir', function(){
     elemento = "<div class='list radius white'>";
     for(var x=0; x<5; x++){
        elemento += "<div class='item'>";
        elemento += "<div class='left'>";
        elemento += "<img class='avatar radius' src=''>";
        elemento += "</div>";
        elemento += "<h2 style='margin-left:40%;'><strong>10,00</strong></h2>";
        elemento += "<p style='margin-left:40%;'>20,00</p>";
        elemento += "<p style='margin-left:40%;'> Por 5,00</p>";
        elemento += "<p class='text-grey-500' style='margin-left:40%;'>SP - SP</p>"; 
        elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
        elemento += "<div class='more_info'>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>30,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>40,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>50,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>60,00</p>";
        elemento += "</div>";
        //elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
        elemento += "</div>";   
     }
     $('#feed_vagas').html(elemento);

     //esconde a div more_info
       $('.more_info').hide();
       $('.bt_ver_mais').click( function(){
         $(this)
         .closest("div.item").find(".more_info")
         .toggle();
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="bt_prosseguir">Prosseguir</button>
<div id="feed_vagas"></div>