2

Podemos atribuir um título (atributo title), a um elemento com marcação no HTML, que tenha essa classe, dessa forma:

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

Exemplo da marcação no HTML com apenas um elemento com a classe:

{<ul class="miniaturas">
   <li>
     <a href="link1.html">
       <img src="img/imagem1.png" > 
       <p class="title-texto" >texto 1 escrito no html, com o title atribuido no Jquey</p>
     </a>
   </li>
 </ul>}

Como poderia atribuir title diferentes aos elementos <p> que tem a mesma classe?

<ul class="miniaturas">
  <li>
    <a href="link1.html">
      <img src="img/imagem1.png"> 
      <p class="title-texto" >texto 1 escrito no html, com o title atribuido no Jquey</p>
    </a>
  </li>
  <li>
    <a href="link2.html">
      <img src="img/imagem2.png"> 
      <p class="title-texto" >texto 2 escrito no html, com o title atribuido no Jquey</p>
    </a>
  </li>
  <li>
    <a href="link3.html">
      <img src="img/imagem3.jpg"> 
      <p class="title-texto" >texto 3 escrito no html, com o title atribuido no Jquey</p>
    </a>
  </li>
</ul>
2
  • Aprimorei a formatação da pergunta, alguma coisa que tenha ficado mal, por favor corrige ou avisa-me.
    – Zuul
    5/03/2014 às 11:26
  • Tudo bem, ficou melhor; estou aprendendo com os mestres. ;) vlw!
    – Thiago Jem
    5/03/2014 às 20:27

1 Resposta 1

3

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(); });
    
  2. 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; });
    
1
  • É exatamente isso que estava procurando; com isso vou economizar muito tempo... Muito obrigado pela ajuda.
    – Thiago Jem
    5/03/2014 às 20:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .