• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

131
Vistas
When removing jquery ui tab programatically, can I renumber the remaining ids?

I am adding and removing jquery tabs programatically, with:

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" );
     });
});

If I add three tabs, and then remove the last tab, there is no problem when trying to add an additional tab- the id of the new tab will be 'num_tabs'. However, if I were to add three tabs, and then remove the first tab, then the tab with id=num_tabs already exists. How can I handle this? Can I renumber the tab ids after removing tabs?

9 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You didn't mention this in your question, but I assume there isn't a need for the ID's to be sequential. What matters is that each ID is unique.

Instead of using num_tabs to determine the number of the tab, you could simply always increment the number (do not decrement it when deleting tabs).

This can be done in multiple ways, like...

  • Use a variable that keeps track of how many tabs you've added.
  • Use jQuery's data- syntax (see .data() to store the number of the tab as a value on the tab. By doing this, you can retrieve the number on the last tab and increment it to determine the number of the next tab.
  • Parse the id of the last-tab using a regex expression to retrieve the numeric value and increment that number when adding a new tab.
9 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.