Gli attributi

JQuery mette a disposizione una funzione molto utile per gestire gli attributi: attr(). Serve ad aggiungere un attributo ad un elemento o a cambiarne il valore. Se per esempio volessi aggiungere un attributo rel a tutti i link di questa pagina:

HTML CODE:

<h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>

<div id="f-author">by Edwin A. Abbott</div>

<h2>Part 1, Section 3</h2>

<h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>

<div id="excerpt">an excerpt</div>

<div class="chapter">

    <p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) 
		and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>. </p>

	  <p class="nobility hexagon">Next above these come the Nobility, of 

      whom there are several degrees, beginning at Six-Sided Figures, 

      or <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, 

      and from thence rising in the number of their sides till they 

      receive the honourable title of <a href="http://en.wikipedia.org/ 

      wiki/Polygon">Polygonal</a>, or many-Sided. Finally when the 

      number of the sides becomes so numerous, and the sides themselves 

      so small, that the figure cannot be distinguished from a <a 

      href="http://en.wikipedia.org/wiki/Circle">circle</a>, he is 

      included in the Circular or Priestly order; and this is the 

      highest class of all.

    </p>

    <p><span class="pull-quote">It is a <span class="drop">Law of 

     Nature</span> with us that a male child shall have <strong>one 

     more side</strong> than his father</span>, so that each 

     generation shall rise (as a rule) one step in the scale of 

     development and nobility. Thus the son of a Square is a Pentagon; 

     the son of a Pentagon, a Hexagon; and so on.

   </p>

   <!-- . . . code continues . . . -->

</div>

JAVASCRIPT Code:

$('div.chapter a').attr({'rel': 'external'});

Nel caso sopra sto individuando tutti i link di tutti i div che hanno classe chapter e gli sto assegnando un attributo rel con valore external

Esempio: Gli attributi 1

Un metodo come questo mi può essere utile quando devo assegnare una proprietà ad una serie di elementi. Ma se avessi voluto definire un id per ognuno dei link? Allora avrei potuto scrivere:

JAVASCRIPT Code:

$(document).ready(function() {

  $(' div.chapter a').each(function(index) {

    $(this).attr({

      'rel': 'external',

      'id': 'wikilink-' + index

    });

  });

});

Ho usato un nuovo metodo .each(), che mi consente di ciclare all'interno di un array senza ricorrere ad un ciclo for.

Questa la sequenza delle azioni:

• $(document).ready(function() - eseguo la funzione al caricamento della pagina
• $(' div.chapter a').each(function(index) - ciclo sull'array dei link (ad ogni iterazione mi viene passato l'indice dell'elemento: index)
• $(this).attr({
  'rel': 'external',
  'id': 'wikilink-' + index
  });
  
  Aggiungo gli attributi rel ed id

Esempio: Gli attributi 2 - each() method

Ora mettiamo il caso che voglia dare un title particolare ai link che puntano a wikipedia:

Javascript code:

$(document).ready(function() {

  $('div.chapter a[@href*=wikipedia]').each(function(index) {

    var $thisLink = $(this);

    $thisLink.attr({

      'rel': 'external',

      'id': 'wikilink-' + index,

      'title': 'learn more about ' + $thisLink.text() + ' at Wikipedia'

    });

  });

});

Esempio: Gli attributi 3 - title