Using Jquery to select and apply functions to specified div elements

Question

Using Jquery to select and apply functions to specified div elements

As someone who is relatively new to JQuery, I have a question regarding the .on() function. Take this example:

$('div').on('click', function() {$(this).toggleClass('show-description');});

This code selects all the 'div' elements in my HTML file and listens for a click event. When clicked, it will toggle the 'show-description' class on and off for the last div that was clicked on.

<div class="show-description"> ......</div>

Now, what if I only want to target a specific class within a div tag for my event listener?

I attempted the following:

$('div.about').on('click', function() {$(this).toggleClass('show-description');});

In my HTML, it looks like this:

<body>
 <div class="clearfix"> 
  <div class="column">
    <ul>
     <li id='about'> <span>About Me</span> </li>
      ......
   </div>
 </div>

However, my 'show-description' styles don't seem to be triggering. I've done some research on the .on() method from the API documentation and checked Stack Overflow, but I'm still stuck. I'm not expecting a direct solution, just hoping for a helpful nudge in the right direction.

Thank you.

jquery html css

Answer 1

Answer №1

$('div.about') will target all div elements with the class about. Interestingly, in your specific case, none of the div elements possess this class.

In the provided example, you do have an element with the identifier about, which is not a class but rather an id, and it exists within the li element.

If you are looking to interact with this element, you may want to use: $('li#about').on('click', ...

Take a look at the following code snippet:

$('div.about').on('click', function() {$(this).toggleClass('show-description');});


$('li#about').on('click', function() {$(this).toggleClass('show-description');});

.show-description {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix"> 
  <div class="column">
    <ul>
      <li id='about'> <span>About Me</span> </li>
    </ul>
  </div>
  <div class="about">This div has the "about" class</div>
</div>

In the above example, there are two clickable elements - li#about and div.about. Clicking on either will toggle a red border on the clicked element.

Additionally, for the given example, we could achieve the same functionality using

$('div.about, li#about').on('click', ...

Answer 2

$('div.about') will target all div elements with the class about. Interestingly, in your specific case, none of the div elements possess this class.

In the provided example, you do have an element with the identifier about, which is not a class but rather an id, and it exists within the li element.

If you are looking to interact with this element, you may want to use: $('li#about').on('click', ...

Take a look at the following code snippet:

$('div.about').on('click', function() {$(this).toggleClass('show-description');});


$('li#about').on('click', function() {$(this).toggleClass('show-description');});

.show-description {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix"> 
  <div class="column">
    <ul>
      <li id='about'> <span>About Me</span> </li>
    </ul>
  </div>
  <div class="about">This div has the "about" class</div>
</div>

In the above example, there are two clickable elements - li#about and div.about. Clicking on either will toggle a red border on the clicked element.

Additionally, for the given example, we could achieve the same functionality using

$('div.about, li#about').on('click', ...

Answer 3

Answer №2

Is it possible to target a specific class that I defined within a div element to handle an event?

In the illustration below, I'm not using the class and on functions, but you should be able to grasp the concept. Imagine you have the following HTML code:

<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

If you want to apply some changes to every li inside a ul, you can use this line of code:

$( "ul.topnav li" ).css( "border", "3px double red" );

However, if you only want to target the direct child li elements inside and immediate children of the ul, you can use something like this:

$( "ul.topnav > li" ).css( "border", "3px double red" );

For your particular scenario, you could try something like this:

$( "div #about" ).on( ... );

I hope this explanation is useful.

Answer 4

Is it possible to target a specific class that I defined within a div element to handle an event?

In the illustration below, I'm not using the class and on functions, but you should be able to grasp the concept. Imagine you have the following HTML code:

<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

If you want to apply some changes to every li inside a ul, you can use this line of code:

$( "ul.topnav li" ).css( "border", "3px double red" );

However, if you only want to target the direct child li elements inside and immediate children of the ul, you can use something like this:

$( "ul.topnav > li" ).css( "border", "3px double red" );

For your particular scenario, you could try something like this:

$( "div #about" ).on( ... );

I hope this explanation is useful.

Using Jquery to select and apply functions to specified div elements

Answer №1

Answer №2

Similar questions

Is it possible to modify the text displayed under your website when you search for it online?

Creating a Border Length Animation Effect for Button Hover in Material-UI

The spacing problem arises from the interaction between two HTML tags containing a Bootstrap file

What is the proper way to define a class attribute for an HTML element within a PHP file?

What is the process of initializing divs in DataTables?

Guide on incorporating a JS file in a React application

Is there a way to eliminate the gap between my menu choices?

Why is it that an HTML entity-containing string doesn't show the character after going through the htmlspecialchars() function?

A modern alternative to using the outdated `confirm` method in

The v-autocomplete feature in vuetify doesn't allow for editing the text input after an option has been selected

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

Changing characters to asterisks using Javascript

Problem with Ajax functionality on Jquery Dialog

Guide to implementing a seamless Vue collapse animation with the v-if directive

choose a CSS class within a div element's class name

How can I specify the exact width for Bootstrap 3 Progress Bars?

Issue with React router not functioning correctly when dealing with dynamically created anchor tags utilizing jquery

What is the best way to resize an image in HTML based on a percentage of its height?

My website using Dynamic Ajax technology is currently experiencing heavy traffic due to the number of getScript

Leveraging strings as URLs to embed PDFs in Wordpress using PDF Embedder