jQuery: the header selector

jQuery provides a useful selector to match all the headings of a web page, namely the :header selector. This selector selects only elements from h1 to h6. For example, given the following HTML structure containing several headings:

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

You can work with these elements singularly, as follows:

$(':header').each(function() {

  var heading = $(this);
  var tag = heading[0].tagName.toLowerCase();
  
  switch(tag) {
  
    case 'h1':
      //...
      break;
    case 'h2':
      //...
      break;
    case 'h3':
      //...
      break;
    case 'h4':
      //...
      break;
    case 'h5':
      //...
      break;
    case 'h6':
      //...
      break;
    default:
      break;
      
  
  
  
  }


});

Or you can apply an action to all of them:

$(':header').addClass('heading');