Learning jQuery 3 - Fifth Edition

Styling list-item levels

Let's suppose that we want the top-level items, and only the top-level items--Comedies, Tragedies, and Histories--to be arranged horizontally. We can start by defining a horizontal class in the stylesheet:

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

The horizontal class floats the element to the left-hand side of the one following it, removes the bullet from it if it's a list item, and adds a 10-pixel margin on all sides of it.

Rather than attaching the horizontal class directly in our HTML, we'll add it dynamically to the top-level list items only, to demonstrate jQuery's use of selectors:

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

Listing 2.1

As discussed in Chapter 1 ...