When to use the css element/class selector in javascript? - javascript

I'm currently working on the codecademy course on building an interactive website and I stumbled upon an ambiguity concerning the use of the elemement/class selection of the css elements.
javascript:
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
};
css:
.current .item {
background: rgba(206,220,206,.9);
}
Why do I have to use the element selector 'current' instead of the class selector '.current' in line 4? Is there any rule behind it or just a specification of jquery?

Simply because the name of the class is current not .current, and in
$('.article').removeClass('current');
current is not any selector but just a classname which you want to remove, instead the selector is .article.
You are thinking that we are using element selector instead of class selector. But you are wrong. Do you see the word Class in removeClass and addClass ? It means you are passing class selector, not element selector as an argument.
Now you may ask why don't you see dot with current? Because classes are specified using dot. Actually we have already specified that we are passing Class Selector, as you can see word "Class" in removeClass and addClass .

as per docs addClass():
Adds the specified class(es) to each of the set of matched elements.
Hence, you need to pass the classname/names as parameter and not class selector built out of it.

In addClass/removeClass you use a class name (like the one you'd specify in the class attribute of your html), not a DOM selector like in $().

The function name removeClass() implies you have to state a class name. Using a selector you have to specify either you want to select a class or an ID.

The addClass and removeClass methods accept one or more space-separated classes to be removed from the class attribute of each matched element. The name of the calss you want to add/remove is "current", not ".current"
http://api.jquery.com/removeclass/
http://api.jquery.com/addclass/

In line 4, you are not using 'current' as a selector, it is a class name. Whenever you use some class name as a selector( for example in .find('.current'), $('.current') , closest('.current') etc) then only the rule of putting.for class name#` for id etc are used. And whenever you are checking some class exists( .hasClass()), adding and removing a class(addClass('current'), removeClass('current'),then you have to mention correct class name. I hope it helps.

Related

Search by selector by class name and style property JS

I am trying to return the desired element by its unique properties. To do this, I need to use something like this code. I have a mistake in it, how do I make this entry correct?
document.querySelector('div[class="className" style*="text-decoration:line-through"]')
You need to separate the attribute selectors:
document.querySelector('div[class="className"][style*="text-decoration:line-through"]');
Also note that as you're using a class to target the elements, use a class selector for better performance:
document.querySelector('div.className[style*="text-decoration:line-through"]');
Lastly, your style selector is incredibly brittle, and very easily broken. For example, if someone validly uses text-decoration: line-through then it will not be matched. I would strongly suggest you use a class to apply the style and select the element.

Jquery function when calling CSS & HTML

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.
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..
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.
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.
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/
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.

jQuery: selector equivalent for parents() method

What I want to do is select an element by id, find one of its parents, and finally select a different child of that parent. I can already do that like this:
$('#id').parents('.class1').find('.class2');
However, I need to be able to do this using a single selector. For example:
$('#id parents .class1 .class2');
Is there an equivalent to the parents() method using just selectors?
Your question is really about CSS at this point, and parent selectors aren't available in CSS.
Based on your comment above, why not set your element to a variable?
var myEl = $('#id').parents('.class1').find('.class2');
widget(myEl);

How can I select an element by id and class in javascript?

I want to know if we can select an element by using its id and class at the same time. I know in css we can do that with #x.y, but but how can it be accomplished in javascript? I tried the following code and it worked fine but then all the controls with ui-slider-handle class got affected(which is obvious). I think I need a combination of id and class both so that only that particular element will be affected.
Javascript:
$(".ui-slider-handle").text(ui.value);
A combination of ID and class for selecting elements is useless as IDs are meant to be unique.
never have multiple identifiers with the same value in one page!
If you want multiple elements with the same attributes, use a class. If not, consider an ID or a class.
If you want to have a lot of elements with the same attributes, but one with extra attributes, you can give that one an ID and assign extra attributes to the ID
You will never need to do this since the ID is unique; if you know it, you can already identify the element.
Your problem is actually that your selector matches too many elements. There are other ways to limit the "range" of a selector:
Add a parent element with a certain ID/class: .parent .ui-slider-handle matches only elements with the class ui-slider-handle that are children of all elements with the class parent
You can also limit by parent type: div .ui-slider-handle
Or only direct children: div > .ui-slider-handle
See jQuery selectors for all the goodies.
Since ids should be unique, you should be able to do your selector by only id. If are wanting to apply the same attribute to multiple elements, then you should use a class. In your scenario it seems you should be fine with just using id like this:
$("#id").text(ui.value);
What you can write is:
$("#ID.ui-slider-handle").text(ui.value);
The string inside the quotes is a normal CSS selector, which supports both classes and ids. However, the above code is redundant and slow, and unless you want to select that particular id only if it has a certain class, it would be preferable to write:
$("#ID").text(ui.value);

Remove element by class using parent()

I am making changes to a jQuery validator, when there is an error it inserts a div to the parent element. I am trying to remove an the inserted div with by the specific class name from the parent.
$(element).parent().remove('.removeThis');
I thought the above code would work but it does not remove the the div.
.remove([selector]) will remove an element with the optional matching selector from the current list of elements in the jQuery object. It does not look through the children of the wrapped elements. Try either of these alternatives:
$(element).siblings('.removeThis').remove();
$(element).siblings().remove('.removeThis');
Try
$(element).parent().find('.removeThis').remove()

Categories