Selector or Script to assign different content to elements with the same class

Question

We can assign a title (attribute title), to an element marked in HTML, which has this class, thus:

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

Example of HTML markup with only one element with class:

{<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>}

How could I assign title different from the elements <p> who has the same class?

<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>

Answer 1

Problem

What’s missing in your code is that you’re saying you want to go to every element with the CSS class .title-texto and add an attribute title with the text value of all elements with the CSS class .title-texto, I mean, you’re going to all of us and adding the text of everyone in each one:

Example of problem in 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());

Solution

In order for you to refer to each element in the sense of taking the text of it and applying it with its own title and not of all, you should scroll through the elements with the CSS class .title-texto one by one, illustrated here by using the jQuery function .each() ^(English):

Example in 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());
});

---

Refactoring of the solution

@bfavaretto warned that the code presented as a solution can be optimized and reduced while maintaining the same end goal.

Therefore, there are two ways to reduce and optimise the previously presented solution:

1. Downsizing

   Here we are reducing the operation of locating the elements with the class .title-texto, applying for each found, an attribute title with the text contained therein:

   Example in Jsfiddle

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

2. Optimisation

   Here, taking the code after reduction, we are optimizing the operation performed by removing the re-search of the element in the DOM performed by $(this), making use of Javascript this applying the this.textContent or this.innerText depending on the browser support:

   Example in Jsfiddle

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