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

Retrieving Data from Database on the Current Page

I am utilizing the ternary operator within the map function to dynamically adjust the column width of a material table

Interactive dropdown menu with options for different actions

Revamping CSS for a Responsive Wordpress Tesseract Theme

Show a table with rows that display an array from a JSON object using JavaScript

How can we identify if the user is utilizing a text-input control?

Splitting HTML content into nodes using PHP XPath (including empty nodes)

How to line up two blocks side by side in a single block with Bootstrap without the use of CSS

Fading away backdrop images for the header

How to turn off validation for md-input-container in Angular 2

script locate the div ID within a given text and clear its content

Is JSF h:outputStylesheet converter the solution for creating dynamic CSS?

Uncheck the previous option selected in a multi-select dropdown using jQuery

Ways to transition to an iframe window

Nesting CSS classes allows for more specific targeting of

Encountered issue while converting half of the string array to JSON using JavaScript

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

Exploring Javascript parameters with the power of jquery

Horizontal JQuery Slider for CategoriesDiscover the smooth, sleek category navigation with

Ways to trigger the onclick event from different controls