0

As a new web developer, I've been utilizing a lot of resources like StackOverflow to assist me in the learning and development process.

When using jQuery, all of the examples/responses that I've come across so far have only referenced classes, like so:

$('.yourClass')

as opposed to

$('#yourID')

Seeing that class referencing seems to be the trend (I honestly haven't found one author who writes a jQuery to an ID), are there any pitfalls I should be aware of for using ID's w/ jQuery or JS in general? Thanks!

EDIT 1: I'm aware that ID's are for single-items, classes are for accessing multiple items. I'm more interested in why I don't see any jQuery or JS examples referencing ID's. Thank you!

8protons
  • 3,591
  • 5
  • 32
  • 67
  • 5
    Use an id (=identifier) when you need to identify a single element. Use a class when you need to classify elements. That's all there is to it. – JJJ Feb 23 '16 at 21:10
  • Thanks, @Juhana. I know that from HTML (your answer is nonetheless appreciated), but are there any pitfalls the relate specifically to JS or jQuery? Like I said, the trend seems to be classes only; like, everyone throws all their stuff into a class(es). – 8protons Feb 23 '16 at 21:13
  • So, I'm wondering if people are avoiding using ID's or what... Thanks :] – 8protons Feb 23 '16 at 21:13
  • 1
    because it's rare that you actually need a single element? bottom line is **use the right tool for the job**. use a class when you need a handle to select multiple elements, use an id when you need a handle to select an element that is unique. sometimes you don't need either. – Kevin B Feb 23 '16 at 21:17
  • I was just trying to learn from systematic observations. Sure, you might jump off a cliff into water if you're a trained diver and know what people are doing, but if you make an observation that MOST people don't seem to be cliff diving, than you might assume it's dangerous. So, with that analogy out of the way, I was simply asking because of trends I observed that didn't make sense to me. ID's seem pretty great for accessing specific objects, especially in the case where I was using Slick, which is one carousel of images. Yet all slick examples I see reference it as a class. :O – 8protons Feb 23 '16 at 21:21
  • People learning javascript like to use ID's because they are simple to target .... however classes for collections and using traversals are more flexible whenever anything is repeating in page – charlietfl Feb 23 '16 at 21:21
  • *"interested in why I don't see any jQuery or JS examples referencing ID's"* probably because when creating examples, the selector used rarely matters. When i was learning jquery it was quite the opposite, most examples used ID's, which lead to developers misusing id's. – Kevin B Feb 23 '16 at 21:23
  • Okay, thanks for the response! – 8protons Feb 23 '16 at 21:23

5 Answers5

1

You would have to ask each author on a case-by-case basis, but generally when creating examples, the selector used doesn't matter; what's important is that you have a jQuery collection that you can call a method on.

By using a class selector in the example, you avoid newbie developers claiming that your plugin doesn't work when they try to use it on multiple elements with the same ID. Your example serves the purpose of showing how to use it on one or more elements, rather than just one.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • There were multiple responses here that were good, but this is the one that directly answered what I was specifically asking; relating to jQuery/JS instead of simply HTML while also giving insight into why I might have been observing the trend mentioned in my question. Thanks! – 8protons Feb 23 '16 at 21:48
0

People like to use classes because ids have to be unique across the whole page. When trying to make reusable, pluggable components, id's make this impossible to enforce.

Exception: the new web-components standard allows you to encapsulate ids to just your component.

dave mankoff
  • 17,379
  • 7
  • 50
  • 64
0

An ID must be unique, you can have only one (like highlanders).

Classes are used to identify a "type" of object not a specific one.

An obligatory car analogy:
An ID is a license plate, unique to one specific thing #345-abc
The class relates to a whole category of things like .truck

Take note that a selector like $(".something") will actually be capable of producing a list of DOM elements; as it will select all DOM elements with the class of "something"

An ID selector $("#unique") will only ever return one element

Culyx
  • 529
  • 10
  • 18
0

Think of your HTML and CSS first.

Using Classes

If you have multiple HTML elements which all will look, feel and behave in the same way, then it is highly recommended to use a class to represent their style and behavior.

Example: rows or columns on a table, navigation buttons which animate in the exact same way, wrapper to images which have the same size throughout your website, etc.

Using ID's

However, if you have a unique HTML element which represents a particular thing or state or action in one of your pages, then that element should contain an id.

Example: pop up modal, a unique looking button, unique sections on your website which you can navigate to by their id, etc.

Then, you can use this behavior in your JavaScript and jQuery or whatever else you like to use.

Further reading

Community
  • 1
  • 1
AGE
  • 3,752
  • 3
  • 38
  • 60
0

I know that you are fully aware of why we should use ID's or classes. But the vast majority of answers that are given here, are thinking of a project context.

So, let's say editing a .js file that is linked to the scope of the entire project, the idea here is to be as reusable as possible, so that's why you'll see much more classes references than ID's. Is hard to maintain a project js file that makes reference to different ID's that are abroad the project. Same thing will apply to css.

I hope the answer is enough, be free to post a comment or suggestions. :-)

victorayub
  • 59
  • 6