jQuery each this

by

Inside jQuery callback functions, this (and also value, in your example) refers to a DOM object, not a jQuery object.

var slides = $(".promo-slide");
slides.each(function(key, value){
    if (key == 0) { // NOTE: the key will start to count from 0, not 1!
        $(this).addClass("first"); // Or $(value).addClass("first");
//------^^----^       
    }
});

BUT: In your case, this is easier:

$(".promo-slide:first").addClass("first");

And when all .promo-slide elements in the same container, a solution in pure CSS is even easier:

.promo-slide:first-child {
    /* ... */
}

As an aside, I find it a useful convention to prefix variables that contain a jQuery object with a $:

var $slides = $(".promo-slide");
$slides.each( /* ... */ );

More Related Contents:

  1. Matching text field value with array value
  2. Replacing live with on function [closed]
  3. How to Get Response From rest URL using jquery
  4. .index() only for one instance of class [closed]
  5. Direct vs. Delegated – jQuery .on()
  6. What is the best way to add options to a select from a JavaScript object with jQuery?
  7. toggle show/hide div with button?
  8. Replace multiple strings at once
  9. jQuery selector for id starts with specific text [duplicate]
  10. How to filter JSON Data in JavaScript or jQuery?
  11. How can I determine if an image has loaded, using Javascript/jQuery?
  12. Call javascript function after script is loaded
  13. Dynamically loading css stylesheet doesn’t work on IE
  14. How to add a “readonly” attribute to an ?
  15. How can I detect whether an iframe is loaded?
  16. Fade In on Scroll Down, Fade Out on Scroll Up – based on element position in window
  17. Content Security Policy: The page’s settings blocked the loading of a resource
  18. Prevent Cheating on Javascript Game
  19. How to convert the following table to JSON with javascript?
  20. offsetTop vs. jQuery.offset().top
  21. Cancel event on input type=”file”
  22. TypeError: $(…).modal is not a function with bootstrap Modal
  23. Javascript – Stop form submit depending on ajax response [duplicate]
  24. Prevent Highlight of Text Table
  25. Regex in JavaScript for validating decimal numbers
  26. User Activity Tracking using javascript library [closed]
  27. Set React Input Field Value from JavaScript or JQuery
  28. Scroll to a specific position on a page using Javascript / Jquery [duplicate]
  29. jQuery InnerText not including sub element
  30. Looping through Markers with Google Maps API v3 Problem

Leave a Comment