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.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I wonder how to get data from this code. I want to download these numbers, but I don't know how.
I have already tried such methods but they did not work.
document.querySelector('.myclass');
document.querySelector('.myclass strong');
document.querySelectorAll('.myclass strong');
And this is the element from which I want to get the numbers. There are two ways on the site but I don't know which will be better so I send 2 items with numbers
<div class="myclass" role="button" tabindex="0">Next number: <strong>97554</strong></div>
or
<div class="anyclass">97532</div>
Did you mean
document.querySelector('.myClass').innerHTML;
document.querySelector('.myClass').innerText;
Use the data-* attribute to embed custom data. eg:
<div class='myClass' data-price="123"> Your ticket costs <i> 123 </i> </div>
Then you can use
document.querySelector('.myClass').getAttribute('data-price');
You need to use .innerText to get the numbers in the strong tag
document.querySelector('.myClass strong').innerText;
This question already has an answer here:
jQuery: Finding partial class name [duplicate]
(1 answer)
Closed 2 years ago.
I want to select an element using querySelector(...)
Let us assume to have a html-fragment like:
<div class="Class1_a123 Class2_z987">Div1 content</div>
<div class="Class1_a123">Div2 content</div>
I want to select only the first div, if it (and this is set dynamically) has the second class.
So I wrote the selector as follows:
document.querySelector("div[class^='Class2']");
The result: Nothing is selected.
So I wonder, whether there is a hierarchy, which class stands in front of the class list.
I thought it checks for all contained classes, whether they start with the expression I need.
Is there a fundamental mistake in my mind and/or understanding, how selectors are working?
If this is right, that the order of classes inside an elements classlist can be important for the layouting/styles of the web-site?
In this case I have to think about all code I've written in past, where I used the class^='...' selectors and have it to replace by class*='...' to let it work as expected.
Any suggestions/corrections are welcome.
So basically, you are trying to query element which has attribute "class" starts with "Class2". To make it works, you need to change the order of the classes.
<div class="Class2_z987 Class1_a123">Div1 content</div>
<div class="Class1_a123">Div2 content</div>
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:
jQuery: Target all except ___?
I've got a script that detects clicks on every element on the page. I'd like that to run on everything except a specific div and its children.
I've tried doing this using the :not selector, but don't really understand how to use that effectively, so I'm not sure if that's the right way to go or not.
Here's some sample code:
<div id="clickme">This is good stuff</div>
<div id="dontclickme">This should not get selected</div>
I'm currently using $("*") for my selector. Is there a way to use that to detect if it's the second div, or any of its children?
You can use .filter() with .closest() to check if element has a certain id or element is a children/descendant of element with certain id...
$('body *').filter(function(i, v) {
return $(v).closest('#dontclickme').length == 0;
})
http://jsfiddle.net/wirey00/7JE7x/
Select all divs, but not .class:
$("div").not(".class")
Works with other selectors too.
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/