Estoy agregando y eliminando pestañas jquery programáticamente, con:
function addtab(input) { var num_tabs = $("div#tabs ul li").length + 1; $("div#tabs ul").append( "<li class='test' title = '" + input + "'><a href='#tab" + num_tabs + "'>" + input + "</a><span class='ui-icon ui-icon-close' role='presentation'></span></li>" ); $("div#tabs").append( "<img id='tab" + num_tabs + "' src='<%=request.getContextPath()%>/Viewer_2D'; height='100%' width='100%'/>" ); $("div#tabs").tabs("option", "active", num_tabs-1); $("div#tabs").tabs("refresh"); } $(function() { $("#tabs").on( "click", "span.ui-icon-close", function() { var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); }); });Si agrego tres pestañas y luego elimino la última pestaña, no hay problema al intentar agregar una pestaña adicional: la identificación de la nueva pestaña será 'num_tabs'. Sin embargo, si tuviera que agregar tres pestañas y luego quitar la primera pestaña, entonces la pestaña con id=num_tabs ya existe. ¿Cómo puedo manejar esto? ¿Puedo volver a numerar las identificaciones de las pestañas después de eliminarlas?
No mencionó esto en su pregunta, pero supongo que no es necesario que las identificaciones sean secuenciales. Lo que importa es que cada identificación es única.
En lugar de usar num_tabs para determinar el número de la pestaña, simplemente siempre puede incrementar el número (no lo disminuya al eliminar pestañas).
Esto se puede hacer de varias maneras, como...
data- de jQuery (vea .data() para almacenar el número de la pestaña como un valor en la pestaña. Al hacer esto, puede recuperar el número en la última pestaña e incrementarlo para determinar el número de la siguiente pestaña.