Skip to main content
Refatoração do código na solução apresentada.
Fonte Link
Zuul
  • 35,8mil
  • 21
  • 99
  • 190

#Problema

O que está a falhar no teu código é que estás a dizer que pretendes ir a todos os elementos com a classe de CSS .title-texto e adicionar um atributo title com o valor do texto de todos os elementos com a classe de CSS .title-texto, ou seja, estás a ir a todos e a adicionar o texto de todos em cada um:

Exemplo do problema no JSFiddle

// em todos os elementos com a classe de CSS ".title-texto",
// pegar no texto de todos e meter como título
$(".title-texto").attr("title", $(".title-texto").text());

#Solução

Para que te possas referir a cada elemento no sentido de pegares no texto do mesmo e aplicares com título dele próprio e não de todos, deverás percorrer os elementos com a classe de CSS .title-texto um a um, aqui ilustrado através do uso da função de jQuery .each() (Inglês):

Exemplo no JSFiddle

// por cada elemento com a classe ".title-texto"
$(".title-texto").each(function() {

    // colocar em cache o elemento actual (eu)
    var $this = $(this);
    
    // adicionar a mim um atributo "title" com o valor do meu texto
    $this.attr("title", $this.text());
});

#Refatoração da solução

O @bfavaretto alertou para o facto de que o código apresentado como solução pode ser optimizado e reduzido mantendo o mesmo objectivo final.

Assim sendo, ficam as duas formas que visam reduzir e optimizar a solução previamente apresentada:

  1. ###Redução

Aqui estamos a reduzir a operação de localizar os elementos com a classe .title-texto, aplicando por cada encontrado, um atributo title com o texto contido no mesmo:

Exemplo no JSFiddle

    $(".title-texto").attr("title", function(){ return $(this).text(); });
  1. ###Optimização

Aqui, pegando no código após redução, estamos a optimizar a operação realizada retirando a rê-pesquisa do elemento no DOM realizada pelo $(this), fazendo uso do JavaScript this aplicando o this.textContent ou this.innerText consoante o suporte do navegador:

Exemplo no JSFiddle

    $(".title-texto").attr("title", function(){ return this.textContent || this.innerText; });

#Problema

O que está a falhar no teu código é que estás a dizer que pretendes ir a todos os elementos com a classe de CSS .title-texto e adicionar um atributo title com o valor do texto de todos os elementos com a classe de CSS .title-texto, ou seja, estás a ir a todos e a adicionar o texto de todos em cada um:

Exemplo do problema no JSFiddle

// em todos os elementos com a classe de CSS ".title-texto",
// pegar no texto de todos e meter como título
$(".title-texto").attr("title", $(".title-texto").text());

#Solução

Para que te possas referir a cada elemento no sentido de pegares no texto do mesmo e aplicares com título dele próprio e não de todos, deverás percorrer os elementos com a classe de CSS .title-texto um a um, aqui ilustrado através do uso da função de jQuery .each() (Inglês):

Exemplo no JSFiddle

// por cada elemento com a classe ".title-texto"
$(".title-texto").each(function() {

    // colocar em cache o elemento actual (eu)
    var $this = $(this);
    
    // adicionar a mim um atributo "title" com o valor do meu texto
    $this.attr("title", $this.text());
});

#Problema

O que está a falhar no teu código é que estás a dizer que pretendes ir a todos os elementos com a classe de CSS .title-texto e adicionar um atributo title com o valor do texto de todos os elementos com a classe de CSS .title-texto, ou seja, estás a ir a todos e a adicionar o texto de todos em cada um:

Exemplo do problema no JSFiddle

// em todos os elementos com a classe de CSS ".title-texto",
// pegar no texto de todos e meter como título
$(".title-texto").attr("title", $(".title-texto").text());

#Solução

Para que te possas referir a cada elemento no sentido de pegares no texto do mesmo e aplicares com título dele próprio e não de todos, deverás percorrer os elementos com a classe de CSS .title-texto um a um, aqui ilustrado através do uso da função de jQuery .each() (Inglês):

Exemplo no JSFiddle

// por cada elemento com a classe ".title-texto"
$(".title-texto").each(function() {

    // colocar em cache o elemento actual (eu)
    var $this = $(this);
    
    // adicionar a mim um atributo "title" com o valor do meu texto
    $this.attr("title", $this.text());
});

#Refatoração da solução

O @bfavaretto alertou para o facto de que o código apresentado como solução pode ser optimizado e reduzido mantendo o mesmo objectivo final.

Assim sendo, ficam as duas formas que visam reduzir e optimizar a solução previamente apresentada:

  1. ###Redução

Aqui estamos a reduzir a operação de localizar os elementos com a classe .title-texto, aplicando por cada encontrado, um atributo title com o texto contido no mesmo:

Exemplo no JSFiddle

    $(".title-texto").attr("title", function(){ return $(this).text(); });
  1. ###Optimização

Aqui, pegando no código após redução, estamos a optimizar a operação realizada retirando a rê-pesquisa do elemento no DOM realizada pelo $(this), fazendo uso do JavaScript this aplicando o this.textContent ou this.innerText consoante o suporte do navegador:

Exemplo no JSFiddle

    $(".title-texto").attr("title", function(){ return this.textContent || this.innerText; });
Elaboração da resposta com correcta identificação do problema e melhor explicação da solução apresentada.
Fonte Link
Zuul
  • 35,8mil
  • 21
  • 99
  • 190

Se entendi o problema, basta#Problema

O que te refiras ao próprio elemento ao invésestá a falhar no teu código é que estás a dizer que pretendes ir a todos os elementos com a classe de te referires àCSS .title-texto e adicionar um atributo title com o valor do texto de todos os elementos com a classe de CSS .title-texto, ou seja, estás a ir a todos e a adicionar o texto de todos em cada um:

Exemplo do problema no JSFiddle

// em todos os elementos com a classe de CSS ".title-texto",
// pegar no texto de todos e meter como título
$(".title-texto").attr("title", $(".title-texto").text());

Ficaria#Solução

Para que te possas referir a cada elemento no sentido de pegares no texto do mesmo e aplicares com título dele próprio e não de todos, deverás percorrer os elementos com a classe de CSS .title-texto um a um, aqui ilustrado através do uso da função de jQuery .each() (Inglês):

Exemplo no JSFiddle

// por cada elemento com a classe ".title-texto"
$(".title-texto").each(function() {

    // colocar em cache o elemento actual (eu)
    var $this = $(this);
    
    // oadicionar próprioa (eu)
mim um atributo "title" com o valor do meu texto
    $this.attr("title", $this.text()); // o meu título é o meu texto
});

Exemplo jo JSFiddle

Se entendi o problema, basta que te refiras ao próprio elemento ao invés de te referires à classe de CSS:

$(".title-texto").attr("title", $(".title-texto").text());

Ficaria

// por cada elemento com a classe ".title-texto"
$(".title-texto").each(function() {
    var $this = $(this); // o próprio (eu)
    
    $this.attr("title", $this.text()); // o meu título é o meu texto
});

Exemplo jo JSFiddle

#Problema

O que está a falhar no teu código é que estás a dizer que pretendes ir a todos os elementos com a classe de CSS .title-texto e adicionar um atributo title com o valor do texto de todos os elementos com a classe de CSS .title-texto, ou seja, estás a ir a todos e a adicionar o texto de todos em cada um:

Exemplo do problema no JSFiddle

// em todos os elementos com a classe de CSS ".title-texto",
// pegar no texto de todos e meter como título
$(".title-texto").attr("title", $(".title-texto").text());

#Solução

Para que te possas referir a cada elemento no sentido de pegares no texto do mesmo e aplicares com título dele próprio e não de todos, deverás percorrer os elementos com a classe de CSS .title-texto um a um, aqui ilustrado através do uso da função de jQuery .each() (Inglês):

Exemplo no JSFiddle

// por cada elemento com a classe ".title-texto"
$(".title-texto").each(function() {

    // colocar em cache o elemento actual (eu)
    var $this = $(this);
    
    // adicionar a mim um atributo "title" com o valor do meu texto
    $this.attr("title", $this.text());
});
Fonte Link
Zuul
  • 35,8mil
  • 21
  • 99
  • 190

Se entendi o problema, basta que te refiras ao próprio elemento ao invés de te referires à classe de CSS:

$(".title-texto").attr("title", $(".title-texto").text());

Ficaria

// por cada elemento com a classe ".title-texto"
$(".title-texto").each(function() {
    var $this = $(this); // o próprio (eu)
    
    $this.attr("title", $this.text()); // o meu título é o meu texto
});

Exemplo jo JSFiddle