I'm wondering if I can use $(this) as well as a class selector before running a function on them.
So rather than doing;
$(this).toggleClass('open');
$('.closed').toggleClass('open');
Do something more like;
$(this, '.closed').toggleClass('open');
Whereas really, the above will select 'this' within the context of '.closed'
Regards,
You can use add():
$(".closed").add(this).toggleClass("open");
It will add this element to the set of matched elements (i.e. .closed).
Related
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);
Jquery
I am trying to change the inner text on multiple td element which I believe should look something like this although this does not appear to be a jquery object when I am debugging (I could be wrong).
What is the correct way this should be done?
$('.leg-number').each(function () {
this.html('foo');
});
Maybe try this instead:
$('.leg-number').html('foo');
which is a shorter and more efficient way to achieve your goal. It is just asking jQuery to set the inner html of every element with class "leg-number" to "foo" without any explicit iteration. Most of the jQuery methods like .html() can work on sets of elements so you don't really need to use .each() for simple cases like this.
Now on why your version didn't work: Using .each() would work if you wrapped this with the jQuery function $() so you could use the jQuery methods on it:
$('.leg-number').each(function () {
$(this).html('foo');
});
The variable this inside of the .each() callback is a DOM element and you need $(this) to convert it into a jQuery object that wraps this element. See the explanation in the answer by epascarello who explained it before I updated my answer.
Read the docs for each(). this is a DOM Html Element node, not a jQuery object reference. You can either convert it back to jQuery or use innerHTML directly.
$(this).html('foo');
or
this.innerHTML = 'foo';
The docs show using $(this) in the examples.
Change:
this.html('foo');
to:
$(this).html('foo');
You're attempting to use a jQuery method on a non-jQuery object. This of course assumes that your table cells have the class .leg-number.
I can select (using jQuery) all the divs in a HTML markup as follows:
$('div')
But I want to exclude a particular div (say having id="myid") from the above selection.
How can I do this using Jquery functions?
Simple:
$('div').not('#myid');
Using .not() will remove elements matched by the selector given to it from the set returned by $('div').
You can also use the :not() selector:
$('div:not(#myid)');
Both selectors do the same thing, however :not() is faster, presumably because jQuery's selector engine Sizzle can optimise it into a native .querySelectorAll() call.
var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);
You could just do it the old fashioned way. No need for jQuery with something so simple.
Pro tips:
A set of dom elements is just an array, so use your favourite toArray method on a NodeList.
Adding elements to a set is just
set.push.apply(set, arrOfElements);
Removing an element from a set is
set.splice(set.indexOf(el), 1)
You can't easily remove multiple elements at once :(
$("div:not(#myid)")
[doc]
or
$("div").not("#myid")
[doc]
are main ways to select all but one id
You can see demo here
var elements = $('div').not('#myid');
This will include all the divs except the one with id 'myid'
$('div:not(#myid)');
this is what you need i think.
That should do it:
$('div:not("#myid")')
You use the .not property of the jQuery library:
$('div').not('#myDiv').css('background-color', '#000000');
See it in action here. The div #myDiv will be white.
I'd like to do a live function on a selector, but i want to add a context depending on this selector.
I know that's wrong but what could be correct to make that right:
$('.myClass',$(this).parent()).live('myEvent',function(){..})
.myClass is a duplicated element class. And this 'live' make me possible to limit the event only in the context, in fact selector parent.
I hope I'm understandable.
It looks like what you're looking for is the .delegate() function, which is just like .live(), but allows for a context (sort of), along with other benefits.
Try this code:
$(this).parent().delegate('.myClass','myEvent',function() { .. } );
Try this
$(document).on(".myClass","event",function(){
var select = $(this).parent();
//use select for further implentation as selecter
})
I want to bind a mouseout call to two CSS selectors so that if I've moved my mouse from one AND the other element, then I call something else. Is this even possible?
You can use something like
$("#selector1, #selector2").bind("mouseout", function(){
// code goes here
});
Read Multiple Selector (“selector1, selector2, selectorN”)
$('.class1, .class2').mousemove(callbackFunction);
jQuery selectors work just like CSS. Just use a comma to separate the classes.