jQuery addClass与具有Waypoint的相同类名的元素

Question

I have an event in which I need to add a class to an element with a matching class name. For example:

<a class="one"></div>
<a class="two"></div>

<div class="one"></div>
<div class="two"></div>

How do I find and add an additional class to the element with the matching class name? Here is my script, I need it to target the tag with matching class.

jQuery('div.two').waypoint(function(direction) {
  if (direction === 'down') {
    jQuery(this).addClass("active") // to <a> element that shares same class
  }
  else {
  }
});

Answer 1

I'm not familiar with this plugin but I'll give it a shot. Based off what you've provided I think your problem is:

jQuery(this).addClass("active")

Since you already know the class, just do:

var tempClass = $(this).attr("class");
jQuery("a."+tempClass).addClass("active");

Answer 2

Just select by class names.

Array.prototype.forEach.call(document.querySelectorAll(".one"), function(el) {
    el.classList.add("whateverClass");
});

Instead of a for loop, this uses the prototype method forEach with the call method to turn the NodeList into an array list, adding the class to each element with the class "one"

DEMO

Answer 3

You probably want to remove the class from the others first, then add to the applicable <a>

jQuery('div.two').waypoint(function(direction) {
  if (direction === 'down') {
     /* remove prior active class */
     jQuery("a.active").removeClass('active');
     /* add to current one */
     jQuery("a.two").addClass('active');
  }
  else {
  }
});

To make this more generic I would add a class like waypoint to all the content elements as well as a data-point to be able to simplify instances.

<div data-point="one" class="waypoint"></div>

JS

jQuery('.waypoint').waypoint(function(direction) {
  if (direction === 'down') {
     /* remove prior active class */
     jQuery("a.active").removeClass('active');
     /* add to current one */
      var linkClass=$(this).data('point')
     jQuery("a." + linkClass).addClass('active');
  }
  else {
  }
});