Optimizing Jquery Code

Question

Optimizing Jquery Code

Navigation

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

2

I have a code that I create to detect if a page contains a 'table' element and if so add some elements to those tables as a message if there is no table and a different message with a link if it exists. In addition to adding a div using the wrap() method to optimize the mobile table.

Everything works well but I would like to see how to optimize it because I feel that there are several things that are repeated for example if (table_exist) is repeated 3 times. This is the code:

jQuery(document).ready(function($) {

var table_exist = ($('table').length); 
var elTitulo = $(".entry-title");

$("table").before("<div id='tablesp'></div>");

if (table_exist) {

  if($('table tbody tr').length < 4){
    // Si hay mesa con menos de 4 lineas 
    elTitulo.after("<a href='#tablesp' class='speclink'>Ver BREVE Tabla de Especificaciones</a> ");
  } else {
    elTitulo.after("<a href='#tablesp' class='speclink'>Ver Tabla de Especificaciones</a> ");
  }

} else {
    elTitulo.after("<p class='speclink'>(No hay tabla especial de especificaciones. Breve descripciÃ³n disponible)</p> ");
}

  //Enlace bajo la tabla para regresar a header

if (table_exist) 
  {
  $('table').after("<a href='#left-area' class='speclink2'>Regresar arriba</a> ");
  } else {
    $('.single #main-content').append("<a href='#left-area' class='speclink3'>Regresar arriba</a>  ");
}


//Agregar div a tables para optimizar en  mobiles
if (table_exist) 
  {
  $('table').wrap("<div style='overflow-x:auto;'>");

  } 
});

jquery

asked by Agustin 16.05.2016 в 17:31

source

2 answers

1

I would leave it like this:

$(document).ready(function() {

  $("table").before("<div id='tablesp'></div>");

  if ($('table').length) {

    if($('table tbody tr').length < 4) {          
      var breve_text = ' BREVE';
    }

    $(".entry-title").after("<a href='#tablesp' class='speclink'>Ver ' + breve_text + 'Tabla de Especificaciones</a> ");
    $('table').after("<a href='#left-area' class='speclink2'>Regresar arriba</a> ").wrap("<div style='overflow-x:auto;'>");

  } else {  

    $(".entry-title").after("<p class='speclink'>(No hay tabla especial de especificaciones. Breve descripciÃ³n disponible)</p> ");
    $('.single #main-content').append("<a href='#left-area' class='speclink3'>Regresar arriba</a>  ");

  }
});

answered by 16.05.2016 в 18:13

Convert VARCHAR to VARBINARY (SQL) Refresh listview SwipeRefreshLayout

score 1 · Accepted Answer

A good starting point would be to group the if, taking into account that all evaluate the same condition and are not exclusive, it would also improve the inclusion of the text in the after function, so as not to repeat similar code.

To avoid traversing the DOM every time we use a selector in jQuery, it is better to store these objects in variables.

$(function() {
  var tablas = $('table'); 
  var elTitulo = $(".entry-title");
  tablas.before("<div id='tablesp'></div>");

  if (tablas.length) {
    var breve_text = '';
    if($('table tbody tr').length < 4) {          
      breve_text = ' BREVE';
    }

    elTitulo.after("<a href='#tablesp' class='speclink'>Ver " + breve_text + "Tabla de Especificaciones</a> ");
    tablas.after("<a href='#left-area' class='speclink2'>Regresar arriba</a> ").wrap("<div style='overflow-x:auto;'>");
  } else {
    elTitulo.after("<p class='speclink'>(No hay tabla especial de especificaciones. Breve descripciÃ³n disponible)</p> ");
    $('.single #main-content').append("<a href='#left-area' class='speclink3'>Regresar arriba</a>  ");
  }
});