Keith

JQuery Selecting HTML Elements

by Keith Rowles • 27/10/2023Framework

Landscape of desert and stars in sky at night

Summary

Using the JQuery JavaScript library to select and traverse various html elements on a webpage and adding a class.

The html content used in this example was taken from the book - Learning JQuery (Fourth Edition).

Normally I use vanilla js… but I will add some examples of JQuery in this post and other posts. The next post will be about events.

CDN

Place CDN link in webpage.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

Add some styles which will be applied to the document.

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
  padding: 30px;
}

h1,
h2,
h3 {
  margin-bottom: 0.2em;
}

.poem {
  margin: 0 2em;
}

.highlight {
  background-color: #ccc;
  border: 1px solid #888;
  font-style: italic;
  margin: 0.5em 0;
  padding: 0.5em;
}

.highlight-henry {
  font-weight: bold;
  font-style: italic;
}

.highlight-red {
  font-weight: bold;
  color: red;
}

.highlight-blue {
  font-weight: bold;
  color: blue;
}

.horizontal {
  float: left;
  list-style: none;
  margin: 10px;
}

.sub-level {
  background: #ccc;
}

a {
  color: #00c;
}

a.mailto {
  background: url(images/email.svg) no-repeat right top;
  padding-right: 18px;
}

a.pdflink {
  background: url(images/pdf.svg) no-repeat right top;
  padding-right: 18px;
}

a.henrylink {
  background-color: #fff;
  padding: 2px;
  border: 1px solid #000;
}

tr {
  background-color: #fff;
}

.alt {
  background-color: #ccc;
}

a.external {
  background: #fff url(images/arrow.svg) no-repeat 100% 2px;
  padding-right: 16px;
}

.special {
  background-color: yellow;
}

.year {
  background-color: aquamarine;
}

.afterlink {
  background: #fff url(images/arrow.svg) no-repeat 100% 2px;
  padding-right: 16px;
}

Here is the html.

<h1>Through the Looking-Glass</h1>
<div class="author">by Lewis Carroll</div>
<div class="chapter" id="chapter-1">
  <h2 class="chapter-title">1. Looking-Glass House</h2>
  <p>
    There was a book lying near Alice on the table, and while she sat watching
    the White King (for she was still a little anxious about him, and had the
    ink all ready to throw over him, in case he fainted again), she turned over
    the leaves, to find some part that she could read,
    <span class="spoken">
      "&mdash;for it's all in some language I don't know,"
    </span>
    she said to herself.
  </p>
  <p>It was like this.</p>
  <div class="poem">
    <h3 class="poem-title">YKCOWREBBAJ</h3>
    <div class="poem-stanza">
      <div>sevot yhtils eht dna ,gillirb sawT'</div>
      <div>;ebaw eht ni elbmig dna eryg diD</div>
      <div>,sevogorob eht erew ysmim llA</div>
      <div>.ebargtuo shtar emom eht dnA</div>
    </div>
  </div>
  <p>
    She puzzled over this for some time, but at last a bright thought struck
    her.
    <span class="spoken">
      "Why, it's a Looking-glass book, of course! And if I hold it up to a
      glass, the words will all go the right way again."</span
    >
  </p>
  <p>This was the poem that Alice read.</p>
  <div class="poem">
    <h3 class="poem-title">JABBERWOCKY</h3>
    <div class="poem-stanza">
      <div>'Twas brillig, and the slithy toves</div>
      <div>Did gyre and gimble in the wabe;</div>
      <div>All mimsy were the borogoves,</div>
      <div>And the mome raths outgrabe.</div>
    </div>
  </div>
</div>
<h2>Selected Shakespeare Plays</h2>
<ul id="selected-plays">
  <li>
    Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>
    Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>
    Histories
    <ul>
      <li>
        Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
        <ul>
          <li>Part I</li>
          <li>Part II</li>
        </ul>
      </li>
      <li><a href="http://www.shakespeare.co.uk/henryv.htm"> Henry V</a></li>
      <li>Richard II</li>
    </ul>
  </li>
</ul>
<div style="display: block; clear: both;"></div>
<h2>Shakespeare's Plays</h2>
<table id="Plays">
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
  </tr>
  <tr>
    <td>All's Well that Ends Well</td>
    <td>Comedy</td>
    <td>1601</td>
  </tr>
  <tr>
    <td>Hamlet</td>
    <td>Tragedy</td>
    <td>1604</td>
  </tr>
  <tr>
    <td>Macbeth</td>
    <td>Tragedy</td>
    <td>1606</td>
  </tr>
  <tr>
    <td>Romeo and Juliet</td>
    <td>Tragedy</td>
    <td>1595</td>
  </tr>
  <tr>
    <td>Henry IV, Part I</td>
    <td>History</td>
    <td>1596</td>
  </tr>
  <tr>
    <td>Henry V</td>
    <td>History</td>
    <td>1599</td>
  </tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table id="Sonnets">
  <tr>
    <td>The Fair Youth</td>
    <td>1-126</td>
  </tr>
  <tr>
    <td>The Dark Lady</td>
    <td>127-152</td>
  </tr>
  <tr>
    <td>The Rival Poet</td>
    <td>78-86</td>
  </tr>
</table>
<hr />
<ul id="myList">
  <li>Top List Item 1</li>
  <li>
    Top List Item 2
    <ul>
      <li>Second Level List Item 1</li>
      <li>Second Level List Item 2</li>
      <li>Second Level List Item 3 <a href="#">Link</a></li>
    </ul>
  </li>
  <li>Top List Item 3</li>
  <li>
    Top List Item 4
    <ul>
      <li>Second Level List Item 1 <a href="#">Link</a></li>
      <li>Second Level List Item 2</li>
      <li>Second Level List Item 3</li>
    </ul>
  </li>
  <li>Top List Item 5</li>
</ul>
<hr />
<table id="myTable" border="1">
  <summary>Table</summary>
  <tr>
    <td>Row 1</td>
    <td>Row 1 Tragedy</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>

  <tr>
    <td>Row 1 Tragedy</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1 Keith</td>
  </tr>
  <tr>
    <td>Row 1 Keith</td>
    <td>Row 1 Rowles</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Row 1 Tragedy</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
</table>

Here is the JavaScript code.

$(document).ready(function () {
  $('div.poem-stanza').addClass('highlight');

  $('#selected-plays > li').addClass('horizontal');

  $('#selected-plays li:not(.horizontal)').addClass('sub-level');

  $('a[href^="mailto:"]').addClass('mailto');

  $('a[href$=".pdf"]').addClass('pdflink');

  $('a[href^="http"][href*="henry"]').addClass('henrylink');

  $('#Plays tr:nth-child(odd)').addClass('alt');

  $('td:contains(Henry)').addClass('highlight-henry');

  $('a')
    .filter(function () {
      return this.hostname && this.hostname != location.hostname;
    })
    .addClass('external');

  $('td:contains(Henry)').next().addClass('highlight-red');

  $('td:contains(Romeo)').parent().children().addClass('highlight-blue');

  $('#myList > li > ul > li').addClass('special');

  $('#myTable td:nth-child(3)').addClass('year');

  $('#myTable tr:contains(Tragedy)').first().addClass('special');
});

Demo

Open demo on Code Pen.

Link to Demo
GitHubCodePen JS Fiddle