jQuery selector to find the last element - javascript

I will really appreciate if someone can tell me how this might be possible.
If I have the following html,
<span><hr class=​"tierEnd">​</span>
<span><hr class=​"tierEnd">​</span>
<span><hr class=​"tierEnd">​</span>
<span><hr class=​"tierEnd">​</span>
How can I select the last hr element?
Tried with last-child, last, last-of-type already

Use jquery :last selector
$(".tierEnd:last")

Use :last or .last()
$('hr:last')
or
$('hr').last()
Demo
last-child and last-of-type does not work in case of <hr>
In that case use $('span:last-of-type hr')

You may use the .last() jQuery method:
$(".tierEnd").last()
For some reason, it is thought to be faster than the pseudo selector.

jQuery("span > .tierEnd").last()
or
jQuery("span > .tierEnd:last")
Using span > .tierEnd will only select direct descendants of a span tag with tierEnd class

You should use the below selector to get the last <hr> element.
jQuery("span:last-child hr.tierEnd")
Please like if this helps you! Cheers :)

Related

finding and selecting the correct class

I need to select .foo, however, there are two a tags with .foo, and I need to select the one only with .foo, and not the one with .foo.bar, how do I accomplish this?
<a class="foo bar">text</a>
<a class="foo">text</a>
the code I'm using to find .foo is
$(this).parents('.post').find('.foo').text('text');
Some changes
Use .closest() instead of .parents() to fetch the nearest ancestor
use the :not() selector to filter out .bar elements
Try
$(this).closest('.post').find('.foo:not(.bar)').text('text');
Use jQuery .not(); http://api.jquery.com/not/
$(this).parents('.post').find('.foo').not('.bar').text('text');
Try
$(this).parents('.post').find('.foo').not('.bar').text('text');
You could just select with a class attribute:
.find('[class=foo]')
You want :not(selector):
$(this).parents('.post').find('.foo:not(.bar)').text('text');
See http://api.jquery.com/not-selector/
You need to use .not() method:
$(this).parents('.post').find('.foo').not('.bar').text('text');
You can read more here:
http://api.jquery.com/not-selector/

How to find elements without a class in Jquery?

I have the following html
<div class="one">One<div>
<div class="two">two<div>
<div >three<div>
<div >four<div>
<div class="three">five<div>
How would I find the div elements which don't have a class attribute? ie three and four?
You can use :not selector
$('div:not([class])');
here is API
And a simple Fiddle
Use :not selector to filter
$('div:not([class])');
Combine the :not() selector with the attribute present selector [class].
$("div:not([class])")
jsFiddle.
Another option is to use .not() with Has Attribute Selector
$('div').not('[class]')
There are different ways to do it. You could use .children() to get the list and then index into that. Or you could look up the second element and use .next() to get its sibling.
Assuming you're not wanting to select all the dividers which have no classes, you can use nth-child to select specific ones if you know exactly where they are within a container. This will select your class-less dividers:
$('div:nth-child(3)') // Selects the third divider
$('div:nth-child(4)') // Selects the fourth divider
$('div:nth-child(3), div:nth-child(4)') // Selects both
JSFiddle example.
Alternatively you can select using .prev() and .next():
$('div.two').next() // Selects the divider after div class="two"
$('div.three').prev() // Selects the divider before div class="three"

Selecting all but the first child of parent with an ID and then applying action

I want to select all the child elements of a parent element (except the first) with jQuery and I have the below..
$("li:not(:first-child)");
But I'm not sure how I can apply it to just the certain parent ID, would something like this work?
$('#myID').("li:not(:first-child)");
If so, I then want to add an element before the respective <li> tag. Would I then be able to do this with?
$('#myID').("li:not(:first-child)").before('<li>Test</li>');
I'm guessing something above is wrong as it isn't working.
Close, just pass in the selector context:
$("li:not(:first-child)", "#myID")
http://api.jquery.com/jQuery/
jQuery( selector [, context] )
selector: A string containing a selector expression
context: A DOM Element, Document, or jQuery to use as context
EDIT:
My initial answer assumed that you have no more li within the child's li. if you strictly only wants to select the children, use >:
$("#myID > li:not(:first-child)")
There's different solutions:
$("li:not(:first-child)", "#myID"); // see #SiGanteng answer
$("#myID li:not(:first-child)");
$("#myID").find("li:not(:first-child)");
Simple: using the :gt() help selector:
Just do it like: demo fiddle
$("#myID li:gt(0)").before('<li>Test</li>');
If you are concerned about speed :) :
$("#myID").find("li:gt(0)").before('<li>Test</li>');
or like: demo fiddle
$("#myID li:not(:first-child)").before('<li>Test</li>');
Assuming #myID is a ul or ol element, another possible way to get all children but the first is
$('#myID').children().slice(1)

jQuery - Selectors for an element with a specific attribute

on my page I have many label tags. Some of them has the for attribute. How should be the jQuery's selector of that label's ?
Try this,
Live Demo
$("label[for]")​
Try this: $('label[for]') if you don't know what is equal to for
A selector like this one will be helpful :
$('label[for="foo"]').css('color', 'red);
EDIT after comment :
To select all labels without knowing the for value :
$('label[for]').css('color', 'red);

jQuery first of type selector?

How would I select the first <p> element in the following <div> with jQuery?
<div>
<h1>heading</h1>
<p>How do I select this element with jQuery?</p>
<p>Another paragraph</p>
</div>
Assuming you have a reference to the div already:
$(yourDiv).find("p").eq(0);
If the first p will always be a direct child of the div, you could use children instead of find.
Some alternatives include:
$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method
$(yourDiv).find("p:first");
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`
Note that the eq method will always be the fastest way to do this. Here's the results of a quick comparison of the eq method, :eq selector and :first selector (I didn't bother with the first method since it's just an alias of eq(0)):
$('div p:first')
answer was too short to post without this useless sentence.
Edit
This is definitely a slow option. After looking at Jame's speed test, it looks like jQuery selectors work best when they piggy back off of css selectors.
$("div p").first();
or $('div p:first');
Reference: http://api.jquery.com/first/
Keep in mind that first() matches only a single element, the :first-child selector can match more than one: one for each parent.
You almost know the answer (from your post title). There is a selector in jQuery called :first-of-type. Use it to find and add class to the first p tag automatically, like so:
$("div p:first-of-type").addClass('someClass');
$('div p').first()
Should work. I think.
This should work
$( "div p:first-of-type" ).css( "font-size: 10px" );
The above code finds the first paragraph in the div as #Denver pointed and changed its fonts-size to 10px
Here is an example that explains even more about jQuery first-of-type selector

Categories

Resources