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

Question

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

Navigation

#1 by (3 votes)

2

We can assign a title (attribute title ) to a markup element in HTML that has this class, like this:

$(".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 to elements <p> that 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>

html jquery css

asked by anonymous 05.03.2014 / 11:54

1 answer

Background panning after keydown effect Content crawler for external pages with PHP [closed]

score 3 · Accepted Answer

Problem

What is failing in your code is that you are saying that you want to go to all elements with the CSS class .title-texto and add a title attribute with the text value of all elements with the class of CSS .title-texto , that is, you are going to all and add the text of everyone in each:

Problem example 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 it in the text of the same and apply with title of itself and not of all, you must go through the elements with the CSS class .title-texto one by one, shown here through use 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());
});

Solution refactoring

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

So, there are two ways to reduce and optimize the solution previously presented:

Reduction

Here we are reducing the operation of finding elements with class .title-texto , applying for each found, a title attribute with the text contained in it:

Example in JSFiddle

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

Optimization

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) , using JavaScript this applying this.textContent or this.innerText depending on the browser support:

Example in JSFiddle

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