Conseguir las identificaciones de etiquetas div

Question

he el siguiente código HTML

<div id="column_1"> 
    <div id="portlet_1"> 
     <div id="portlet-header_1"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_1"> sub header goes here </div> 
     <div id="portlet-content_1"> content goes here </div> 
     <div id="portlet-footer_1"> footer goes here </div> 
    </div> 
    <div id="portlet_2"> 
     <div id="portlet-header_2"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_2"> sub header goes here </div> 
     <div id="portlet-content_2"> content goes here </div> 
     <div id="portlet-footer_2"> footer goes here </div> 
    </div> 
</div> 

<div id="column_2"> 
    <div id="portlet_3"> 
     <div id="portlet-header_3"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_3"> sub header goes here </div> 
     <div id="portlet-content_3"> content goes here </div> 
     <div id="portlet-footer_3"> footer goes here </div> 
    </div> 
    <div id="portlet_4"> 
     <div id="portlet-header_4"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_4"> sub header goes here </div> 
     <div id="portlet-content_4"> content goes here </div> 
     <div id="portlet-footer_4"> footer goes here </div> 
    </div> 
</div> 

¿Cómo:

1. conseguir dependiendo de qué botón de cierre se hace clic en el identificador de columna? Entonces, si se hace clic en close_button que se encuentra en portlet-header_3, se debe devolver la columna_2

2. obtener la ID del portlet, ¿en función de qué botón de clic se hace clic? Así que si close_button se hace clic en el que se encuentra en portlet-header_1, debe devolver portlet_1

Tengo el siguiente, pero esto devuelve el más cercano div, portlet-header_ *, que no es lo que busco:

$(".close_button").live('click', function(event) { 
    event.preventDefault(); 

    var that = this; 
    alert($(that).closest("div").attr("id")) 
}); 

Answer 1

Prueba esto (usando jQuery .parents()):

$(".close_button").live('click', function(event) { 
    event.preventDefault(); 
    var that = this; 
    alert($(that).parents("[id^=column_]").attr("id")) 
}); 

violín: http://jsfiddle.net/maniator/3EJBC/

Answer 2

Necesitaría usar clases también, y use .closest(selector) o tendría que hacer parent().parent().pa... en el árbol a la que desea. .closest(selector) es mucho más fácil y le permite agregar nuevos elementos más adelante en medio y en línea.

Estas son dos opciones.

Esto es lo que se vería en la práctica:

<div id="column_1" class="columns"> 
    <div id="portlet_1" class="portlets"> 
     <div id="portlet-header_1"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_1"> sub header goes here </div> 
     <div id="portlet-content_1"> content goes here </div> 
     <div id="portlet-footer_1"> footer goes here </div> 
    </div> 
    <div id="portlet_2" class="portlets"> 
     <div id="portlet-header_2"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_2"> sub header goes here </div> 
     <div id="portlet-content_2"> content goes here </div> 
     <div id="portlet-footer_2"> footer goes here </div> 
    </div> 
</div> 

<div id="column_2" class="columns"> 
    <div id="portlet_3" class="portlets"> 
     <div id="portlet-header_3"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_3"> sub header goes here </div> 
     <div id="portlet-content_3"> content goes here </div> 
     <div id="portlet-footer_3"> footer goes here </div> 
    </div> 
    <div id="portlet_4" class="portlets"> 
     <div id="portlet-header_4"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_4"> sub header goes here </div> 
     <div id="portlet-content_4"> content goes here </div> 
     <div id="portlet-footer_4"> footer goes here </div> 
    </div> 
</div> 

function(){ 
    var column_id = $(this).closest('.columns').attr('id') 
    var portlet_id = $(this).closest('.portlets').attr('id') 
} 

Answer 3

se puede seleccionar el div padre más cercano con id que empiezan con 'column` así:

$(that).closest("div[id^='column']").attr("id"); 

You can try it here.

Answer 4

Try esto:

$(".close_button").live('click', function(event) {  
    event.preventDefault();  
    var that = this;  
    alert($(that).closest("div[id^='column_']").attr("id")) ; // For column 
    alert($(that).closest("div[id^='portlet-header_']").attr("id")) ; // For portlet 
}); 

Answer 5

probar este

var columnId = $(this).closest("div[id^='column'").attr("id"); 
var portletId = $(this).closest("div[id^='portlet'").attr("id");