como optimizar este código de jquery

[cuasatar]

Hola a todos, estoy empezando a trabajar con jquery y pues poco a poco estoy tratando de optimizar la escritura para simplificar el código, yo se que para muchos de pronto esta duda es sencilla pero como yo recien inicio me cuesta un poco.

El código que tengo es el siguiente:

Código PHP:

    $('.chart #header').click(function() {
    $('.chart #header').attr('title', 'Test');
    $('.chart #header').width('600px');
    $('.chart #header th.nombre').text('nombre');
    $('.chart #header th.apellido').text('apellido');
    $('.chart #header th.edad').text('edad');
    $('.chart #header th.fecha').text('fecha');
  }); 
   

Simplificandolo he logrado lo siguiente.

Código PHP:

    $('.chart #header').click(function() {
    $(this).attr('title', 'Test').width('600px');
    $('.chart #header th.nombre').text('nombre');
    $('.chart #header th.apellido').text('apellido');
    $('.chart #header th.edad').text('edad');
    $('.chart #header th.fecha').text('fecha');
  }); 
   

Como se dan cuenta ya he simplificado el objeto pero tengo dudas sobre como simplificar el elemento (.chart #header th) para lograrlo escribir de forma reducida.
Agradezco cualquier colaboración para optimizar este código. De antemano les doy las gracias si me explican como se debe optimizar este código.

[dontexplain]

En este momento no se me ocurren formas de simplificarlo, creo que está ya demasiado simplificado, sólo se me ocurre

Código PHP:

  a[0]="nombre";
a[1]="apellido";
a[2]="edad";
a[3]="fecha";
 
$('.chart #header').click(function() { 
    $(this).attr('title', 'Test').width('600px'); 
   $(this+" >th").each(function(i,d){
   $(d).text(a[i]); 
}
  }); 
   

Y ni siquiera he probado que funcione.

[cuasatar]

dontexplain Gracias por responderme, creo que si se debe hacer algo parecido a lo que tu colocas pero tal y como lo pones no funciona. Seguire investigando. Igual si alguien sabe le agradezco su colaboración.

[alexg88]

Buenas,

Se me ocurre algo así, una mezcla entre lo que tienes y lo de dontexplain.

Este es el más simple, aprovechando la posibilidad de que a la función $ se le puede pasar el contexto desde donde quieres buscar, le pasas this y mejora un poco el rendimiento.

Código Javascript:

$('.chart #header').click(function() { 
    $(this).attr('title', 'Test').width('1000px'); 
    $('th.nombre',this).text('nombre'); 
    $('th.apellido',this).text('apellido'); 
    $('th.edad',this).text('edad'); 
    $('th.fecha',this).text('fecha'); 
 });
 

Esta formando es usando objetos (clave y valor), por si quieres que el nombre del elemento y el texto que quieres poner sea distinto.

Código Javascript:

var datos = {"nombre":"Nombre","apellido":"Apellido","edad":"Edad","fecha":"Fecha"};
 
 
 $('.chart #header').click(function() { 
    $(this).attr('title', 'Test').width('1000px'); 
     
     for(key in datos){
     $("th."+key+"'",this).text(datos[key]);
 }    
    
  });
 

También podrías hacerlo con un array simple.

Código Javascript:

var datos = ["nombre","apellido","edad","fecha"];
 
 
 $('.chart #header').click(function() { 
    $(this).attr('title', 'Test').width('1000px');
     
     for(i=0;i<datos.length;i++){
     $("th."+datos[i]+"'",this).text(datos[i]);
 }
     
    
  });
 

[cuasatar]

Muchas gracias en verdad alexg88 y dontexplain por sus respuestas. La ultima idea que me dio alexg88 funciono bien. El problema era mas que todo de manejo de sintaxis porque yo suponia que debia poder hacerse de una forma mas practica sin tener que invocar cada clase de los th uno por uno.

Hoy aprendi algo nuevo en Jquery, muchas gracias en verdad por la colaboración.