Combine two selectors with one jQuery object - javascript

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);

Related

How to select $(this) and .class to do something in one line?

I know this is a silly question but how can I toggleClass() in a single line to both selectors.
$('.search-ico').click(function(){
$(this).toggleClass('is-active');
$('.class').toggleClass('is-active');
});
I tried below:
$('.search-ico').click(function(){
$(this,'.class').toggleClass('is-active');
});
but it's not working (only this is taking the class).
Thanks
you can use the .add method to combine string selectors and this.
https://api.jquery.com/add/
Use it like this:
$(this).add('.class').toggleClass(...)
Assuming the elements of class search-ico carry an id attribute, you can compose the selector string:
$("#" + $(this).attr('id') + ", .class").toggleClass("is-active")
note you can also add properties to the first object before adding a second object to it, and whatever property you add after the second object applies to all of them..
$(this).css('property','value').add('.class').toggleClass(...)
so here the css property of (this) is altered first.. before added to the second object, and then the toggleClass applied to all of them..

change attributes of css class when javascript function runs

so I have this function below...
<script>
$('.tile').on('click', function () {
$(".tile").addClass("flipOutX");
setTimeout(function(){
$(".tile-group.six").load("musability-musictherapy-company-overview.html");
}, 2000);
});
</script>
I basically want to change the css attributes of tile-group.six to have a different margin. Any ideas how I might go about this ?
you should take a look at the .css() function of jQuery
like
$(".tile-group.six").css('margin-left', '50px');
and so on
$(".tile-group.six").css({margin:"0"});
This should be what you're after.
As Phylogenesis pointed out in his comment on the below answer, this method can be used to change multiple CSS values at once using a comma delimiter e.g.
$(".tile-group.six").css({margin:"0", padding:"0"});

Selector passing to jQuery function

I have a function in which I want the selector that I am passing to do the enclosed processes. The functions are listed below:
function menuselector (id){
$(id).css('background', 'url(../img/black_denim.png) repeat');
$(id).css('color', '#FFF');
}
function menudeselector (id){
$(id).css('background', 'none');
$(id).css('color', '#CE0101');
}
menuselector('mgi');
mgi is an ID of a div tag
Ids are targeted by using a hash before the id, the same as in CSS.
If you're passing
menuselector('mgi');
You will need to adjust it to make it a valid selector.
$('#' + id).css(...
or you can send the valid selector
menuselector('#mgi');
assuming you have an element with that id (you haven't shown that)
<div id="mgi">
Aside
You shouldn't keep selecting the element. You can either chain
$(id).css('background', 'none').css('color', '#CE0101');
// on new lines for readability if there are a lot of actions
$(id).css('background', 'none')
.css('color', '#CE0101');
or use an object
$(id).css({background: 'none', color: '#CE0101'});
mgi is not a valid selector. You should write:
menusector('#mgi');
or
menuselector('.mgi');
depending on whether you want to select an ID or a class.
You could use popnoodle's solution, if your function should only be applicable to IDs, although making it restrictive like that seems like poor generality.
Just pass '#mgi' if it is an ID:
menuselector('#mgi');

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')");
}
});

jQuery - match element that has a class that starts with a certain string

I have a few links that look like this:
...
How can I bind a function to all elements that have a class that starts with "rotate-" ?
You can use starts with selector like this:
$('a[class^="rotate-"]')
Description: Selects elements that
have the specified attribute with a
value beginning exactly with a given
string.
So your code should be:
$('a[class^="rotate-"]').click(function(){
// do stuff
});
Note: If you want to find out elements that contain certain text anywhere in their attributes, you should do this instead:
$('a[class*="rotate-"]').click(function(){
// do stuff
});

Categories

Resources