Picking up top div ID to click

Question

Picking up top div ID to click

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I need to get the ID of the DIV greater than the button is, for example:

<div id="1">
  <button id="1"></button>
</div>
<div id="2">
  <button id="2"></button>
</div>

If I click the button 2 it should inform the name of the div 2, but what becomes a problem is that there are several other div within div 2, the actual example follows below:

        <div class="upage hidden background_PRINCIPAL" id="lista_REUNIAO">
        <div class="upage-outer fixed-header-footer">
            <ion-header-bar class="bar inner-element uib_w_37 colorGeral bar-positive bar-header" data-uib="ionic/header" data-ver="0" align-title="center">
                <div class="buttons widget-container content-area horiz-area wrapping-col">
                    <button class="button widget uib_w_39 d-margins ion ion-chevron-left" data-uib="ionic/button" data-ver="0" id="btn_Voltar_Minha_Celula"></button>
                </div>
                <h1 class="title">Historico de Reuniões</h1>
                <div class="buttons widget-container content-area horiz-area wrapping-col"></div>
            </ion-header-bar>
            <div class="upage-content content-area" id="page_9_17">
                <div id="barSelectAll">
                    <li class="item item-checkbox colorCheck">
                        <label class="checkbox checkbox-dark">
                            <input type="checkbox" id="selectAll">
                        </label>
                        <span class="textoSelecionarTodos">Selecionar todos</span>
                    </li>

                </div>
                <ul class="list" id="listaReunioes"></ul>
                <div id="barOption">
                    <div class="button-bar widget uib_w_69 d-margins" data-uib="ionic/button_bar" data-ver="0">
                        <a href="#janela" rel="modal">
                            <button class="button widget uib_w_70 button-assertive ion ion-android-close" data-uib="ionic/button" data-ver="0"></button>
                        </a>
                        <button class="button widget uib_w_71 button-positive ion ion-edit" data-uib="ionic/button" data-ver="0" id="btnAlteraReuniao"></button>
                    </div>
                </div>
                <div class="window" id="janela">
                    <a href="#" class="fechar">
                        <img src="images/icones/close_4-512.png" width="25px" height="25px">
                    </a>
                    <h4>Você tem certeza que deseja deletar esta(s) reuniões ?</h4>
                    <p>Se estiver certo desta decisão oferecemos duas opções para você. Recomendamos a escolha da primeira.</p>
                    <p>A primeira você clica em 'Enviara para Lixeira', esta opção você terá condição de refazer.</p>
                    <p>A segunda você clica em 'Excluir', caso escolha esta opção esteja ciente que não tera como refazer,</p>
                    <p>tudo que estiver ligado a este membro será excluido.</p>
                    <button id="lixeira">Enviar para Lixeira</button>
                    <button id="delCompleto">Excluir</button>
                </div>
            </div>
        </div>
    </div>

I need this to give scrollTOP in the correct div follows what I use today:

   $("a[rel=modal]").click( function(ev){
 ev.preventDefault();
 var body = document.getElementById("page_31_31"); //AQUI TEM QUE SER O ID DA DIV ONDE AQUELE BOTAO SE ENCONTRA
 body.scrollTop = 0;
$(body).animate({scrollTop:$(this.hash).offset().top}, 800);

var id = $(this).attr("href");

   var alturaTela = $(body).height();
    var larguraTela = $(window).width();

//colocando o fundo preto
$('#mascara').css({'width':larguraTela,'height':alturaTela});
$('#mascara').fadeIn(1000); 
$('#mascara').fadeTo("slow",0.8);

var left = ($(window).width() /2) - ( $(id).width() / 2 );
var top = ($(window).height() / 2) - ( $(id).height() / 6 );

$(id).css({'top':top,'left':left});
$(id).show();   
});

javascript jquery

asked by anonymous 04.11.2015 / 13:21

2 answers

1

Using the parent() function in jQuery you get the parent element of the element in question.

In the example below, clicking the button is setting the background of the parent div of red.

Reference

$('button').on('click', function() {
  $(this).parent().css("background-color", "red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="1">
  <button id="1">filho 1</button>
</div>
<div id="2">
  <button id="2">filho 2</button>
</div>

04.11.2015 / 13:34

How to deal with the use of getline () in a for (;;)? SELECT sort by quantity of another SELECT

score 1 · Accepted Answer

An example below using closest and a class defined in div parent.

$(document).ready(function(){
  $("#btn-1").on('click', function(){
    var divId = $(this).closest('div.area').attr('id');
    $("#resultado").text(divId);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><divclass="area" id="rh">
  <button id="btn-1"> Clique Aqui </button>
  <br/><br/>
  <div id="resultado"></div>
</div>