3

I am confused regarding the use of ' ' and '.' in a jQuery function. When exactly do you use one or the other?

For example,

var main = function(){
    $('.article').click(function(){
        $('.article').removeClass('current')
        $('.description').hide();  
        $(this).addClass('current');
        $(this).children('.description').show();
    }
)};

$(document).ready(main);

Why is it correct to use .addClass('current') and not .addClass('.current'), or children('.description') instead of children('description')?

Thank you, I couldn't really find the answer or knew how to look for it on Google.

Improve this question

5 Answers 5

Reset to default
4

The . is when you are referring to a Class. Check this for more about classes. So in your case you are using . when you are doing something with the classes. Example $(this).children('.description').show();. Somewhere in your HTML code there is an element with class .description ( example <div class="description"> </div>). And you didn't use . in .addClass() method because you are not referring to existing class but you are "creating" one.

You should also check this to know more about jQuery selectors..

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This is mostly true. I would note that the reason you don't have to use the dot syntax for .addClass() is not because there is no existing class but because it can only deal with classes. The other jQuery methods (.children(), .find(), .closest(), etc.) are ambiguous and can reference classes, IDs, attributes, etc. The only methods that I know of that behave this way (requiring that the dot be excluded) belong to the Class Attribute Category.
Oh okay that makes sense. In my HTML code <div class="article current"> is the only "current" word that I found. So in this case .article is the class and current is not?? Is that why it is written like this at the begining of the code? $('.article').click(function(){ $('.article').removeClass('current') $('.description').hide();
In you case, article and current are both classes. You can set several classes to one element but only one id. But in your jQuery code you're removing class "current".
2

Here is my explanation. There are a couple of different things going on.

This is a typical jQuery pattern:

$(selector).doSomething(parameter);

Whatever is inside $( ) is called the selector. This is an expression that identifies which DOM elements will be selected to apply a function on.

Selectors can have the following format:

'div' or 'a' or ... // selects all the divs or all the anchor tags
'.someclass' // selects all elements that have class 'someclass'
'#someid'    // selects all the elements that have id 'someid'
somevariable // a variable that is defined somewhere else (e.g. var somevariable = '.someclass')

The . notation denotes classes. So .description, signifies: Select a class. Which class? The class with the name description.

So much for selectors, now let's look at parameter. A parameter is a variable that you pass to a function. If your function expects a css class, as addClass does, then you pass the name of that class as a parameter. In your case, the name of the class is description.

Improve this answer

Comments

2

You would use the prefix . if you are referring to a class, and # if you are referring to an ID.

However, addClass() knows that it is a class, so it does not need the . prefix.

Improve this answer

Comments

1

I would like to share my knowledge about your question.

  • addClass() use to add specific(es) class to current element. It's require class name => You don't need use . before class name.
  • children() use to get children element, it's require a selector. Selector can be class (.), ID (#) or DOM object (ex div, p, ...).

Read jQuery API documentation for detail

http://api.jquery.com/

Improve this answer

Comments

1

jQuery uses CSS selectors to select elements, so when you have a function like children(), you must use a correct css selector, such as '.class-name'. addClass just takes class name as an argument, so 'class-name' is proper one in this case.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.