Is there an opposite of .find()?
Where $('.myclass').except('#myid');
Would grab all elements with .myclass except the element with #myid.
I know I could do $('.myclass[id=myid]') in this example, but seems like it would be helpful in other cases.
Thanks
EDIT:
Thanks for the responses! Looks like I just missed seeing .not() and :not() in the documentation.
$('.myclass').not('#myid');
http://api.jquery.com/not/
Try .not() – it removes any element matching the selector.
$('.myclass').not('#myid')
If you want a single string selector, then use this:
$('.myClass:not(#myid)')
This uses the :not() pseudo-class selector instead of the .not() filter function.
It seems counter-intuitive, but this single selector method may be slower at times, because getting elements via class (without filtering) is optimized, it filters each of those as the selector passes in this case.
The alternative, using .not() can be faster, depending on the number of elements matching .myclass, because finding an element by ID is a very fast operation, so excluding it from the set is rather quick.
Generic
$('selector:not(selector)').doStuff()
Specific
$('.myclass:not(#myid)').doStuff()
I believe is the correct solution.
Visit http://api.jquery.com/not-selector/
For more use cases and examples.
I think you're looking for not()
Yes there are. You can use either jQuery's :not selector or .not() function. Sample code:
$('.something').not('.else')
$('.something:not(.not-me):not(.neither-me)')
As a side note, CSS3 has native :not pseudo-class.
You're all wrong. Not is not strictly the opposite of Find because Not only searches the current elements and not the descendents, while Find() will search through descendants to see if a certain criteria matches. The opposite of Find is instead .Not(:has(...)).
Related
Finding elements by attribute in jQuery is simple:
$(parentElement).find('[attribute]');
How do you find elements, that don't have a certain attribute?
That's why the :not() is made for.
Try,
$(parentElement).find(':not([attribute])');
You can use :not although filter is most likely faster:
$(parentElement).filter(function() {
return !$(this).attr('attribute');
});
i have div s with id like that:
manufacturer_12,
manufacturer_37,
manufacturer_71,
etc...
is there a way to find all the div s which their visibility is visible, and to do to them something like:
$('[id^="manufacturer"]').slideToggle("slow");
the problem is that its imposibble to make a for loop because their id isn't consecutive.
maybe i should use http://api.jquery.com/jQuery.each/ ?
You could use .each, but this may work:
$("[id^='manufacturer']:visible").slideToggle("slow");
Indeed, you can use :visible.
$('[id^="manufacturer"]').filter(":visible").slideToggle("slow");
But be aware that .slideToggle() will apply to all matched elements as the documentation says. So, you actually don't need to use .each() here.
.slideToggle( [duration] [, callback] )
Returns: jQuery
Description: Display or hide the matched elements with a sliding motion.
In this case, all visible elements with id starting with manufacturer.
Believe me, that's not a good way of doing things.
You'd better assign a specific class to all items of interest and write a very simple selector basing on class name only. This will work much faster.
I'm trying to select the last element of a navigation bar that could have x number of elements. I know that jquery selectors are arraylike objects, so I have tried using bracket notation to select the last element:
$(".navLinks")[$(".navLinks").length - 1].text();
This has not worked. Can anyone help me out with this? How do you select an element within a jquery selector and then attach a method to that element?
Use the :last selector:
$(".navLinks:last").text();
Additional Information
You can read up on all jQuery's selectors here.
I guess
$('.navLinks:last').text();
will do it in a more convinient way.
Read more about selectors
Try:
$(".navLinks:last-child").text();
KISS - use the :last selector. More info here
$(".navLinks:last").text();
If you know the specific type of element you're looking for, .last() may be what you need. Here's an example with 'a'.
$(".navLinks a").last().addClass('myClass');
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 have a event i trigger on every link in my site.
but then i want it to NOT trigger on links i've got class='nofocus' on.
for example
<a>link</a>
<a class='nofocus'>register</a>
$('a').live('click', function() {
$('#searchbox').focus();
}
how do i rewrite the $('a) so the second link wont trigger the event?
Theoretically, there are three options.
1. Using the “attribute not equal to” selector
The “attribute not equal to” selector matches elements that either don’t have the specified attribute or do have the specified attribute but not with a certain value.
$('a[class!=nofocus]')
This will only work as long as you don’t use multiple classes on your A elements in your markup, e.g. foo.
See Selectors/attributeNotEqual in the jQuery docs for more information.
2. Using .not()
Another option is to select all the A elements first, then filter the results, removing elements with class="nofocus" from the result set.
$('a').not('.nofocus')
This is more flexible, because it allows the use of multiple classes on A elements.
Also, it’s slightly faster than using The Attribute Not Equal To Selector™ in Firefox, but slightly slower in Safari.
See Traversing/not in the jQuery docs for more information.
3. Using the :not() selector
The fastest (and shortest) option is to use the :not selector:
$('a:not(.nofocus)')
Also, my tests point out that this is by far the fastest method of the three — more than twice as fast as using the attribute not equal to selector!
Performance comparison of the three options
I created a jsPerf test case so you can test this yourself: http://jsperf.com/get-elements-without-specific-class.
TL;DR: Use $('a:not(.nofocus)').
Try the :not() selector (docs):
$('a:not(.nofocus)').live('click', function() {
$('#searchbox').focus();
}
Selector: $("a:not(.nofocus)") will select all links without the nofocus class.
Use $("a:first"). http://docs.jquery.com/Selectors/first to just get the first one.
$('a:not(.nofocus)')
should do the job
http://docs.jquery.com/Selectors/not