This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jquery: select the last 4 items in the list
jQuery has the nth-child psuedo-class, but is there a way to select the say 3:rd to last child ?
Assuming you don't necessarily need to use the :nth-child() notation, you could use a negative index with eq():
$(selector).eq(-3);
JS Fiddle demo.
Or, in compliant browsers, you could simply use CSS:
elementSelector:nth-last-child(3) {
/* CSS declaration block */
}
JS Fiddle demo (tested, and confirmed-working, in Chromium 19/Ubuntu 11.04).
The CSS-selector, presumably thanks to document.querySelector()/document.querySelectorAll(), is also available as a selector in jQuery:
$('li:nth-last-child(3)').css('background-color','#f90');
JS Fiddle demo
References:
eq().
Related
This question already has answers here:
How can I select an element with multiple classes in jQuery?
(14 answers)
Closed 6 years ago.
I am using jquery bootpag to display pagination on a page
<div class="textgray showing"></div>
How should I tell jQuery to select this div? I tried the following without but neither of these attempts work
$(".textgray .showing").html("some text");
$(".textgray showing").html("some text");
P.S I am a beginner in frontend so bear with me
The space means the second part is inside the first one (it's called the descendant combinator). Remove it:
$(".textgray.showing").html("some text");
You don't need to put that extra space in between selector. space in selector looks for descendant elements:
$(".textgray.showing").html("some text");
This question already has answers here:
How can I select an element by name with jQuery?
(14 answers)
Closed 6 years ago.
Sorry if this is too simple, I am new to programming and I stumbled upon this problem. How can I use the name attribute as the selector inside a
$(document).on('click', '#thisisforid', function().. ?
It is well documented that I can use the id and class name by using #idname and .classname but it is nowhere to be found (I tried so hard to search) how to or if I could use the name attribute instead.
Use an Atrribute Selector like this:
$("[name = 'theNameYouWant']");
More CSS Selectors here.
Note: The CSS Selectors are not exclusive features of jQuery. They work everywhere (in CSS files, using document.querySelector ...)
Try this: $(document).on('click', '*[name="3"]', function().. the * should not be necessary in most cases.
You can do it this way.
$( "[name*='man']" ).on('click', function(){
alert("worked!!");
})
You can refer this docs for attribute selection in jQuery
https://api.jquery.com/attribute-contains-selector/
This question already has answers here:
How can I get the elements without a particular attribute by jQuery
(7 answers)
Closed 9 years ago.
I'm trying to use jquery to grab all select elements which do not have the "multiple" attribute set. I tried with the :not() but I can't get it quite right.
$(document).ready(function() {
$('select:not(multiple)').select2();
});
You forgot the attribute selector. What you're looking for there is "a <select> that is not a <multiple>"
$("select:not([multiple])").select2();
$('select:not([multiple])').select2();
or
$('select').not('[multiple]').select2();
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
nearest ancestor node in jQuery
html:
<div class="post">
<h2>Pellentesque</h2>
<p>More</p>
</div>
jQuery
$('.more').bind("hover", function(){
$(this).parent('.post').hide() ;
});
on hover (.more) i want to hide the post, but it does nothing
if i use parents() instead it deletes ALL the .posts on the page
any help appreciated
Try
$('.more').bind('hover',function()
{
$(this).closest('.post').hide();
});
here is the working demo with single class.
here is the demo with multiple classes.
Use jQuery.closest : http://api.jquery.com/closest/
This question already has answers here:
Select element by index (multiple elements of same class)
(4 answers)
Closed 2 years ago.
Possible Duplicate:
Select element by index (multiple elements of same class)
Quick question, I'm targeting all the article elements in my html5 page using:
var articles = $("article");
What I want to do is target one of the article elements using an index only. I can't seem to get it to work, any ideas?:
articles[1].css("display", "none"); // <-- This won't work
The array is returning the DOM element rather than the jQuery object. The .css() function does not exist on the DOM element, so you can wrap it in with the jQuery $ function to create a jQuery object that you can call .css() on.
Try $(articles[1]).css("display", "none");
Demo
Edit: Or even better articles.eq(1).hide();
You can use the .eq() function to target a specific index,
$("article").eq(1).css("display", "none");
According to the jQuery documentation referenced above,
Reduce the set of matched elements to
the one at the specified index.
Try this. This should target the first article
var articles = $('article').eq(0);
articles.css({"display":"none"});
Check this out for more of an explanation but this does exactly what you need.
http://api.jquery.com/eq/