为什么在这种情况下addClass不能识别为函数？

Question

I'm trying to add a class to a bunch of links whose suffix ends in .pdf as follows:

var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(addClass("pdf")); // Adding the class

This doesn't work, however, as the browser console prints this error when I try to reload the HTML file calling the .js file:

ReferenceError: addClass is not defined

Why is this happening?

Answer 1

jQuery allows you to perform it's API methods not only on single elements, but also on collections of elements (which is one of the nice advantages over the native DOM API).

The easiest way to achieve your goal is to capitalize on that:

var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.addClass("pdf"); // Adding the class

jQuery $.each() function is for those cases where you want to do something with each element in the collection that is not available as an API method in jQuery. It expects you pass it a function that gets passed the current element in each iteration as this :

var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(function() { console.log(this.href); }) // perform something jQuery doesn't offer as an API method

If you insist on using $.each() , the code is this:

var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(function() { $(this).addClass("pdf"); }); // Adding the class

Answer 2

https://api.jquery.com/addClass/

After choosing the pdf links you can directly call the addClass method on the variable pdfs because this is a jquery object and the class will be applied to all the links.

 var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links pdfs.addClass("pdf"); // Adding the class 

Answer 3

addClass(className) is a method of DOM element object. Must be called with element object. when we call addClass() without DOM object reference it look for local function, and thus throw the reference error.

var pdfs = jQuery("a[href$='.pdf']"); 
pdfs.each(function() {
  $(this).addClass( "foo" );
});

Answer 4

So... in whole:

$("a[href$='.pdf']").each(function () {
   $(this).addClass("pdf");
})

Answer 5

.each needs a function ( delegate ) for calling it for per item of jQuery result, but func() (in this case: addClass(..) ) will call addClass function (that is not defined in current scope) and pass result of calling it to each function.

you can access to addClass function of per item, like this:

pdfs.each(function(index, pdf){
   $(pdf).addClass(...);
});

or for all:

pdfs.addClass(...);