Develop Reference

How to use single function to multiple classes?

I've got this following code:
<script type="text/javascript">
$(document).ready(function(){
$('.sample1').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
})
</script>
It adds class so I can get some animations with mouse click event.
I have some more classes in HTML like 'sample2', 'sample3', etc. and would like to add exactly the same animations (classes of course has different content).
I know one solution, namely just add in same code n-times, but change class for each block of code. Is there a shorter way? I thought maybe something with arrays, not sure. I'm not really good in JS, it's like my first time ;)

You can just group the classes, separated by commas. Example :
$('.sample1, .sample2, .sample3').click(function(){

You can edit your code to take multiple selectors.
<script type="text/javascript">
$(document).ready(function(){
$('.sample1, .sample2, .sample3').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
})
</script>

Simply use multiple selectors:
$('.sample1, .sample2 , .sample3').click(function(){
$('.dropdown-content').toggleClass('visible-dropdown');
})
You could try
$('*[class*="sample"]')
This is the source

You can use css selectors:
Catch the elements which have classes started with 'sample':
$('[class^=sample]').on('click',function(){
//Do something
});
Catch the elements which have classes ended with 'sample':
$('[class$=sample]').on('click',function(){
//Do something
});
To find more information about css selectors:
https://www.w3schools.com/cssref/css_selectors.asp

jQuery :hover selector [duplicate]

I need to define a div's background color on :hover with jQuery, but the following doesn't seem to work:
$(".myclass:hover div").css("background-color","red");
How can I get the same result? It's important that it has to be done with jQuery but for some reason it doesn't work. Any suggestions? Thanks!

I would suggest to use CSS over jquery ( if possible) otherwise you can use something like this
$("div.myclass").hover(function() {
$(this).css("background-color","red")
});
You can change your selector as per your need.
As commented by #A.Wolff, If you want to use this hover effect to multiple classes, you can use it like this
$(".myclass, .myclass2").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"red":"transparent")
})
Js Fiddle Demo

You can try this:
$(".myclass").mouseover(function() {
$(this).find(" > div").css("background-color","red");
}).mouseout(function() {
$(this).find(" > div").css("background-color","transparent");
});
DEMO

I know this has an accepted answer but if anyone comes upon this, my solution may help.
I found this question because I have a use-case where I wanted to turn off the :hover state for elements individually. Since there is no way to do this in the DOM, another good way to do it is to define a class in CSS that overrides the hover state.
For instance, the css:
.nohover:hover {
color: black !important;
}
Then with jQuery:
$("#elm").addClass("nohover");
With this method, you can override as many DOM elements as you would like without binding tons of onHover events.

Well, you can't add styling using pseudo selectors like :hover, :after, :nth-child, or anything like that using jQuery.
If you want to add a CSS rule like that you have to create a <style> element and add that :hover rule to it just like you would in CSS. Then you would have to add that <style> element to the page.
Using the .hover function seems to be more appropriate if you can't just add the css to a stylesheet, but if you insist you can do:
$('head').append('<style>.myclass:hover div {background-color : red;}</style>')
If you want to read more on adding CSS with javascript you can check out
one of David Walsh's Blog posts.

Use JQuery Hover to add/remove class or style on Hover:
$( "mah div" ).hover(
function() {
$( this ).css("background-color","red");
}, function() {
$( this ).css("background-color",""); //to remove property set it to ''
}
);

It's too late, however the best example, how to add pseudo element in jQuery style
$(document).ready(function(){
$("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
$("a.dummy").hover(function() {
$(this).css("background-color","#0670c9")
}).mouseout(function(){
$(this).css({"background-color":"#003d79",});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>

Combine two selectors with one jQuery object

I have two divs with id's: #addNew_tab and #sendCom_tab.
I'd like clicking on either of these to trigger the same jQuery click() function.
I was thinking something like:
$("#addNew_tab", "#sendCom_tab").click(function(){
//do stuff
});
but that doesn't work.

$("#addNew_tab, #sendCom_tab").click(function(){
//do stuff
});
Changed from:
$("#addNew_tab", "#sendCom_tab")
To:
$("#addNew_tab, #sendCom_tab")
comma inside the selector("a, b") means the first plus the second; Just like with CSS selectors
(Well, it's a CSS selector...)
jQuery(selector)
Description: Accepts a string containing a CSS selector which is then used to match a set of elements.
It's equal to:
$("#addNew_tab").add("#sendCom_tab")...

function doStuff() {
// do stuff
}
$("#addNew_tab").click(doStuff);
$("#sendCom_tab").click(doStuff);

Removing multiple properties

Currently I'm using this minor bit of javascript to remove a small list of properties from a single page.
<script>
jQuery(document).ready(function ($) {
$('p').remove('.field-css-classes');
$('p').remove('.field-description');
$('p').remove('.field-link-target');
$('p').remove('.field-xfn');
$('p').remove('.link-to-original');
});
</script>
Being quite/really new with javascript I was wondering if a snippet like this can be even more optimized.
In example to something like this
<script>
jQuery(document).ready(function ($) {
$('p')array.remove('.field-css-classes', '.field-description', '.field-link-target', '.field-xfn', '.link-to-original');
});
</script>
(which, as you can tell, isn't working)

Include the commas in the string....
jQuery(document).ready(function ($) {
$('p').remove('.field-css-classes, .field-description, .field-link-target, .field-xfn, .link-to-original');
});
example at http://jsfiddle.net/gaby/B4q2a/

jQuery selectors allow for comma separated selections
jQuery(function ($) { //aliasing document.ready shortcut
$('p').remove('.class1, .class2, .class3')
});

Really easy, use some simple CSS in your selector
$('p').remove('.field-css-classes, .field-description, .field-link-target, .field-xfn, .link-to-original');

Since, in your example, you only removing classes of the p tags and you're using jquery, you can use jquerys removeClass method. According to the API, you can specify several classes there, like so:
$('p').removeClass('class1 class2 class3');
So, no commas seperating the class names and no leading dots.

Javascript/jQuery .each and syntax issue

I'm having some trouble writing a function to change a background image on a div on document.ready
I haven't made a jsfiddle as i think the problem is just my poor (but improving) jQuery skills. Please let me know if you think one is needed.
Background Info ->
I have a collection of div's with a class of portlet-visible or portlet-hidden, each of these div's will have another class of red-arrow (or a different color, but once i have one color it should be easy to extrapolate). When the page loads i would like a function that can find all divs with a class of portlet-hidden or portlet-visible and see if those have a class of red-arrow. If they do then change the background image src to a different value.
Im really struggling to work this one out, and any help is much appreciated.
My HTML
<div class="portlet-visible red-arrow"></div>
My CSS
div.portlet-visible
{
position:absolute;
top:12px;
right:10px;
background-image:url(../images/red-arrow-up.png);
width:14px;
height:14px;
}
And finally my javascript
$(document).ready(function() {
$(".portlet-hidden" && ".portlet-visible").each(function() {
if ($("this").hasClass(".red-arrow")) {
$(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
};
});
});

Multiple selectors should be separated by a comma(,) and also css method takes a string or a map. Try this.
$(document).ready(function() {
$(".portlet-hidden, .portlet-visible").each(function() {
if ($(this).hasClass("red-arrow")) {
$(this).css('background-image', "url('../images/blue-arrow-up.png')")
};
});
});

I would have written the selector this way
$(".portlet-hidden, .portlet-visible")

Unless there's a specific reason you want to do this with jQuery you should just use CSS...
div.portlet-visible
{
background-image:url(../images/red-arrow-up.png);
width:14px;
height:14px;
}
div.portlet-visible.red-arrow
{
background-image:url(../images/blue-arrow-up.png);
}
Any div with the class "portlet-visible" is defined in the first block, and any div with the classes "portlet-visible" and "red-arrow" will use the same css, but also apply the new background image.
http://jsfiddle.net/johncmolyneux/gcm5b/

First... Archer's answer is spot on-- what you're trying to do with jQuery can be done with CSS alone.
But if for some reason you do need jQuery, a few things are wrong here.
First, as justtkt said in his answer, your selector is wrong. There is no need (and is syntactically wrong) to use conditional operators like && or || in a jQuery selector. This is simply because there is already conditional syntax built in to CSS, upon which jQuery selectors are directly based.
.this-class.that-class
Selects all elements with both .this-class, and .that-class.
#this-id.that-class
Is a very (possibly overly) specific declaration that select an element (there should only be one ID per page) with both #this-id and .that-class
For more on selectors, please read this very thorough, complete, and educational link http://www.w3.org/TR/selectors/
Additionally and importantly
This line:
$("this").hasClass(".red-arrow")
Is wrong! hasClass does not require a selector (the ".") because it only takes a class. It should be
$("this").hasClass("red-arrow")
Also!!
$(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
This line has some errors... should be:
$(this).css("background-image", "url(../images/blue-arrow-up.png)")
although I think the following syntax is easier:
css({'background-image' : 'url(../images/blue-arrow-up.png)'})

Your selector is just incorrect. If you want to match things with both classes, it'd be:
$('.portlet-hidden.portlet-visible').each( ...
If you want to match either of the classes:
$('.portlet-hidden, .portlet-visible').each( ...
The expression ".portlet-hidden" && ".portlet-visible" will always evaluate to just ".portlet-visible".

Instead of && two selectors together, use the multiple selector like $(".portlet-hidden, .portlet-visible") or the .add() method to build up your jQuery.
Your current line is actually anding the two strings together, which I believe will return boolean true in Javascript.

if ('$("this").hasClass(".red-arrow")') { <--- this condition is a string here
Should be:
if ($(this).hasClass(".red-arrow")) {

change in selector ".portlet-hidden,.portlet-visible"
change if condition to boolean from string
change in css.
$(".portlet-hidden,.portlet-visible").each(function(){
if ($("this").hasClass("red-arrow")){
$(this).css("background-image", "url('../images/blue-arrow-up.png')");
}
});