trying to select the last element of a navigation bar - javascript

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

Related

Selecting element with specific class and value

How to select element with class MyClass and value MyValue, but without using each?
I tried something like:
$(".MyClass").find("[value='MyValue']")
$(".MyClass[value='MyValue']")
This is example: http://jsfiddle.net/HQaG5/
It works if i use hard coded value for select element.
You want :contains() :
$( ".MyClass:contains('MyValue')" )
Take a look here: jquery find element by text
You can use the :contains selector to find elements containing text.
But if you want to match an exact string then .filter is the better option
If the element is an input and you want to search after property value you can use .filter()
$('.MyClass').filter(function(){
return this.value=="MyValue";
});
DEMO
If you are looking to get the select box element that has the specified value selected (which seems to be the case based on your fiddle), then you can use this…
$(".MyClass option:selected[value='MyValue']").parent()
DEMO
However, I would question why you want to do this, as it seems kind of backwards.

jquery slideToggle on all open div s

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.

"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