Whenever the button in a list is clicked, a class will be added to the top element using Jquery

Is there a way to add a specific class to an element when clicking a button, without using the .click function on every individual div? It needs to be added only to the corresponding element within the same box as the clicked button. I'm not sure if this is possible with jQuery since I am unfamiliar with it.

$(".btn-top-heart").click(function() {
  $(".heart-right").addClass('red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <h4 class="panel-title">
      Test 1
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13727272537272723d707c7e">[email protected]</a>">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 2
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65040404250404044b060a08">[email protected]</a>">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 3
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adccccccedcccccc83cec2c0">[email protected]</a>">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 4
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52333333123333337c313d3f">[email protected]</a>">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 5
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75141414351414145b161a18">[email protected]</a>">Sell</a>
    </button>
  </li>
</ul>

Any assistance would be greatly appreciated :)

javascriptjqueryhtmlcssjquery-plugins

Answer №1

Here is a simple solution that should do the trick:

$('.btn-top-heart').on('click', function() {
    $(this).closest('li').find('.heart-right').toggleClass('red');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

concealing additional content within a DIV using ellipsis

Looking to conceal additional text within my DIV element with ellipsis (...) at the end Currently using: <div style="width:200px; height:2em; line-height:2em; overflow:hidden;" id="box"> this is text this is text this is text this is text </div ...

javascriptjqueryhtmlcssajax

Ajax cannot retrieve the selected option from a select dropdown menu

My Objective- I aim to develop a page where there is a list of clients, the user selects one, and Ajax then loads a data table containing the client's information. My Approach- To begin, I am focusing on setting up the client selection and integr ...

jqueryruby-on-railsajax

Angular Headers API Development

https://i.sstatic.net/zQzAC.jpg I've been attempting to include the X-APIKeys headers in every api call, but I'm only finding examples in curl. Here's what I've tried: var accessKey = "gdgfdgdfgdgdgfdgdfgfdgfdgdgh"; var sec ...

javascriptangularjshttphttp-headers

Retrieve the $error variable within an Angular directive

Within a directive, I am utilizing an input with a dynamic name structure: <input class="input-field" name="{{name}}" type="number" ... /> My goal is to retrieve the $error variable of the form from inside the directive. Can this be achieved by usi ...

javascriptangularjsangularjs-directiveangularjs-scope

The error message "[Insecure URL]" was triggered at line 85 of angular.min.js in the AngularJS framework

Looking for some assistance with Angular as I have limited knowledge. It was working fine on localhost, but after upgrading from PHP5 to PHP7, I encountered this error: angular.min.js:85 Error: [$sce:insecurl] http://errors.angularjs.org/1.2.13/$sce/inse ...

javascriptphpangularjs

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current

I am experiencing an issue with my card decks and expand/collapse functionality. Currently, when I expand one card in the deck, all the other cards in the row also expand, leaving a large blank area. This becomes problematic especially when the content is ...

javascripthtmlbootstrap-4

React Video Component not re-rendering upon state change

I am facing an issue while developing a video player in React. The page retrieves JSON data from the server and creates simple clickable links to change the video content. I have integrated an HTML5 player as a component, passing props such as controls, sr ...

javascriptreactjsuse-effectuse-state

As the user types input in real time, automatically adjust the form's value before submission

I'm looking for assistance in dynamically updating the value of a form submit button as the user types into an input field. <form> <input type="text" name="number" id="number" value = 0 /> <input type="submit" id="submit"> ...

javascriptjqueryhtml

Items positioned to the left will not overlap

Having trouble with floating elements? Need to ensure that box 3 aligns under box 1 when resizing the browser window? Use this HTML template: <div class="box"> <p>box 1</p> <p>box 1</p> <p>box 1</p> & ...

htmlcss

Is it possible to add and delete DIVs simply by clicking on a link?

By utilizing a select dropdown list and appending the HTML code stored in the variable "code" (resembling <div>...</div>) right before the end of the div with ID mydiv using $(code).appendTo('#mydiv');. Within these dynamically added ...

jqueryhtml

Achieving blazing fast CSS rendering in extensive ReactJS projects

What is the best method for efficiently rendering CSS in ReactJs: using custom CSS or the style-component CSS package? ...

javascripthtmlcssreactjsjsx

Tips on minimizing object array and extracting its worth using javascript

I am currently facing a challenge with reducing an object array. The array is as follows: arr=[{title: 'AP', CurrentDate: 2019-07-31, Status: 'done', NoOfEvents:'6' }] My goal is to reduce this array object specifically to ex ...

javascriptarraysreactjs

How can buttons be placed dynamically next to each other using Bootstrap?

I currently have the following code snippet: <div class="button-box col-lg-12"> <a href="mylink.php" class="btn btn-info" role="button">About Us</a> <a href="mylink.php" class=& ...

csstwitter-bootstrapbootstrap-4

Utilizing image backgrounds for hyperlinks in the Android browser

Encountering a minor issue with some <a> tags that have images as background, and the text inside the tags is indented using CSS. However, on the Android browser, part of the string used in HTML appears to cover the background image within the area o ...

htmlcssandroid-browser

Uncaught ReferenceError: The variable in Next.JS is not defined

Within the server-side code of page.tsx, I have a client-side component called SelectType.tsx. The functionality should be as follows: When the user changes the value of the select component It triggers a function inside page.tsx The function is supposed ...

javascriptreactjstypescriptnext.jsscope

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: https://i.sstatic.net/bzgOT.jpg Internet Explorer: https://i.sstatic.net/qHH1r.jpg The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on In ...

htmlcssinternet-explorer

The form submits immediately after jquery is activated

One challenge I'm facing involves multiple forms on a single page being submitted using jQuery. Currently, I have the following code snippet: $("form").submit(function (e) { // Submit form via Ajax }); The problem arises when the form is only s ...

jqueryhtmlajax

Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered ...

htmlcsssvg

I'm looking for a more efficient CSS solution to apply my :before & :after to all menu links collectively, rather than having to add them individually to each one

I have created a CodePen with a working hover effect using :before & :after on li link options. However, I am looking for a more efficient way to globally apply the position of these pseudo-elements without adding separate styles for each link option. ...

javascripthtmlcss

How do I get rid of the form border and shadow on my WordPress login page?

Currently revamping the appearance of the Wordpress login page and most aspects are coming together smoothly. I opted to utilize a separate css file for this project, which has been effective overall. However, one issue persists. I've encountered diff ...

csswordpresswordpress-themingshadow