Find child elements by missing attribute with jQuery - javascript

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

Related

jQuery get an element by its data-id

Similar to this question here, I'm looking to get an element based on it's data-id.
...
I'm looking to take action on the a tag. It has a shared class amongst many other elements and has no base id, just a data-item-id.
Can the element be found by it's data-item-id or can I only find out what the data-item-id is?
$('[data-item-id="stand-out"]')
You can always use an attribute selector. The selector itself would look something like:
a[data-item-id=stand-out]
This worked for me, in my case I had a button with a data-id attribute:
$("a").data("item-id");
Fiddle
Yes, you can find out element by data attribute.
element = $('a[data-item-id="stand-out"]');

trying to select the last element of a navigation bar

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

"All but not" jQuery selector

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.

Opposite of .find()

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(...)).

Chaining selectors in jQuery

I'm a guy used to mootools' way of chaining selectors, and I can't seem to find anywhere how to do the same in jQuery.
Suppose I have a select element in the selectObj variable. What I need is to get the last option in that select.
In mootools I would have done something like:
var option = $(selectObj).getElement('nth-child(last)')
Can I do something similar, or what is the way of getting that last option in jQuery?
PS. I know about the parent > child selector, but I can't really use it because I don't know what selector has been used to get the select. I only have the resulting element.
$(selectObj).find(':last')
You can use find to perform another query within the current query.
In general, you can check out the Selectors and Traversal pages on jQuery docs when you're trying to figure out how to select something.
var option = $(selectObj).children(":last");
will return the last child of any element
You can also use .last() for this purpose.
jQuery has the :last Selector
$("tr:last").stuff()
Will do stuff to the last row in a table.

Categories