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/
Related
This question already has answers here:
jQuery find which parent is closer?
(5 answers)
Closed 3 years ago.
I need to find the .closest() ancestor with any one of the given class.
jQuery("#gid").closest(".ui-tabs,.tab-pane,.jomsTabsContent");
What I want here, is which ever of the given classes is the closest one, I need to select that.
So for the following eg.
HTML
<div class="foo">
<div class="bar">
<div class="monkey">
<div id="gid">
<div>
<div>
<div>
<div>
JS
jQuery("#gid").closest(".foo,.bar,.monkey");
I want the above to select (only) the .monkey div.
PS: I know the above isn't correct syntax for what I'm 'looking for', but I am demonstrating what I am looking for.
Opps... It looks like, If there is an overlapping hirerchy, then then .closest() returns the closest of the provided CSS group.
Got it after a little google-foo here.
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:
Can't select div with id=":1"
(2 answers)
Closed 7 years ago.
I have an element that has a period in it:
<div id="parent">
<div id="my.element"></div>
</div>
and I want to select it using Prototype. I've tried this:
$$('#parent #my.element');
but it isn't working because it thinks the .element part is a class. Is there a way around this?
FYI, it isn't really an option to rename the element. Unfortunately I'm stuck with this naming scheme as well as only Prototype
Thanks
You can always escape your dot in css, so this should work
$$('#parent #my\\.element');
EDIT: As stated by Oriol and tested, you indeed have to use 2 slashes
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I am able to hide a DOM tree which look in this way by using .closest().
<div class='parent'>
<!-- some html code -->
<div class='child'>
</div>
<!-- some html code -->
<div>
$('.child').closest('parent').hide();
It will be possible to get the same effect just by using CSS?
If yes, how?
No selector currently exists that can select a previous or parent element.
There is a level 4 selector that is currently being developed.
So in the future, you may be able to do something like this:
!.parent > .child { display: none; }
But until then, you'll have to stick with
$('.child').parent();
in jQuery.
No. See for yourself, no such selector exists in CSS3, and not in CSS2 either.
Might be able to use this
.child:parent .parent{display:none;}
http://css-tricks.com/parent-selectors-in-css/
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().