jQuery add class to nearest element

Question

I tried with .next(), .closest() .parent() but non of them worked.

Here is my html markup:

<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow"></i>
    </div>
    <div class="ct_amy_arrows_prev">
        <i class="fa fa-angle-left prev-arrow"></i>
    </div>
</div>

I am trying to show left arrow after user does the first click on the right arrow.

I hide it with:

jQuery('.ct_amy_arrows_prev').removeClass("prev_show");

Then I show it with:

jQuery('.ct_amy_arrows_prev').addClass("prev_show");

It works but since there are multiple instances of that slider on a page click on the first slider activates all left arrows on all sliders.

So I need a way to just activate that closest element and add prev_show class to it. What am I doing wrong?

The whole nav code:

//Navigation
//==================================================
function initButtons() {
  jQuery('#arrownav' + sliderID + ' .next-arrow').click(function() {
    gonext();
  });
  jQuery('#arrownav' + sliderID + ' .prev-arrow').click(function() {
    goprev();
  });
}
var stopnextslide = 0;

function gonext() {
  var stopnextslide = 0;
  var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;

  jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) + 3 == n) {
      deck.slide(0);
      stopnextslide = 1;
    }
  });
  if (stopnextslide != 1) {
    jQuery(this).closest(".ct_as_arrow_nav").find(".ct_amy_arrows_prev").addClass("prev_show");
    deck.next();
  }
};

function goprev() {
  var stopnextslide = 0;

  var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;

  jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 3) {

      deck.slide(n - 1);
      stopnextslide = 1;
    }
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 1) {

    }
  });
  if (stopnextslide != 1) {
    deck.prev();
  }
};

Thanks

Which element you click on? – ibrahim mahrir Feb 18 '17 at 20:11 — ibrahim mahrir, Feb 18 '17 at 20:11
I click on .next-arrow – Marc Sommerson Feb 18 '17 at 20:15 — Marc Sommerson, Feb 18 '17 at 20:15

score 2 · Accepted Answer · answered Feb 18 '17 at 20:46

You know the structure. Just navigate up to the parent then search for the previous button. No need to use expensive operations like closest

$('.ct_amy_arrows_next').on('click', function() {
  $(this).parent().find('.ct_amy_arrows_prev').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow">&gt;</i>
    </div>
    <div class="ct_amy_arrows_prev" style="display: none;">
        <i class="fa fa-angle-left prev-arrow">&lt;</i>
    </div>
</div>

Thanks, I have reworked my solution and used show hide instead of adding classes. Worked nicely. — Marc Sommerson, Feb 18 '17 at 21:28

Mihai Alexandru-Ionut · Answer 2 · 2017-02-18T20:20:39.097

You can achieve this using closest and find methods:

$('.next-row').click(function(){
    $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});

$('.next-arrow').click(function(){  
 $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});

.prev_show{
   color:red;
}
i{
   font-size:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow"></i>
    </div>
    <div class="ct_amy_arrows_prev">
        <i class="fa fa-angle-left prev-arrow"></i>
    </div>
</div>
<div id="arrownav2" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow"></i>
    </div>
    <div class="ct_amy_arrows_prev">
        <i class="fa fa-angle-left prev-arrow"></i>
    </div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

You can do it like this:

$(this).closest(".ct_as_arrow_nav")
       .find(".ct_amy_arrows_prev")
       .removeClass("prev_show");;

Or like this:

$(this).parent()
       .next(".ct_amy_arrows_prev")
       .removeClass("prev_show");

Note: If the navs are dynamically created then consider binding the events like this!

Edit:

Change your initButtons to this:

function initButtons() {
  jQuery('#arrownav' + sliderID + ' .next-arrow').click(gonext);
  jQuery('#arrownav' + sliderID + ' .prev-arrow').click(goprev);
}

So that gonewt and goprev will have this bound to the arrow buttons.

edited May 23 '17 at 12:16

Community

1
1

answered Feb 18 '17 at 20:15

ibrahim mahrir

31,174
5
48
73

This is not working, no class is being added. Any ideas why? Also I had to change $ to jQuery – Marc Sommerson Feb 18 '17 at 20:40
@MarcSommerson is the navs dynamically created? Put an alert inside the event listener, does it pop up? – ibrahim mahrir Feb 18 '17 at 20:42
@MarcSommerson, my answer it is not working for you ? I added a live code snippet. – Mihai Alexandru-Ionut Feb 18 '17 at 20:45
@Alexandru-IonutMihai I guess the navs are dynamically generated and an **event delegation** is required! – ibrahim mahrir Feb 18 '17 at 20:46
I dont't have any idea.If you look at his post you can see that the click event it is working. – Mihai Alexandru-Ionut Feb 18 '17 at 20:48
I have added the whole nav code from js file, please take a look. – Marc Sommerson Feb 18 '17 at 20:58
@MarcSommerson, i suggest you to pass as parameter the icon clicked object, because in your current code you have `jQuery(this).closest(".ct_as_arrow_nav").find(".ct_amy_arrows_prev").addClass("prev_show");` and `this` refers to `window` object, not to your `icon` clicked. – Mihai Alexandru-Ionut Feb 18 '17 at 21:23

jQuery add class to nearest element

3 Answers3