So I am the newest person to javascript and I have an .class inside a couple of Div.id's and am unable to access the id successfully with my .css formatting. Here is my structure.
<div id="mainColumn">
<div id="SpotlightContainer">
<div id="SpotlightText">
<div class="Title"></div>
</div>
</div>
</div>
here is how I try to acces it in JQuery,
$('div.mainColumn div.SpotlightContainer div.SpotlightText div.Title').html(data[0].title);
I can see the data[0].title coming through in Chrome, so I know that isn't the issue.
Can someone please point out where I am going wrong. Thanks.
An id selector starts with a # not a . (which is for a class selector).
You're prefixing IDs with ., but that's for classes. IDs are prefixed with #. You could also use a simpler selector:
$('#mainColumn .Title')
CSS selector for id is #. Your query should be '#mainColumn #SpotlightContainer #SpotlightText div.Title'
Will work ('#' is an id selector. '.' is a class selector!):
$('div#mainColumn div#SpotlightContainer div#SpotlightText div.Title')
However, that selector string will work through any number of children in the hiearchy, independently of how many layers down the child was found. To be more strongly typed, you could specify that the child must be the first child:
$('div#mainColumn > div#SpotlightContainer > div#SpotlightText > div.Title')
..or keep using the whitespace and do not depend on the structure inbetween your elements:
$('div#mainColumn div.Title')
Try this:
$('#mainColumn #SpotlightContainer #SpotlightText .Title');
"#" is used to select id and "." is used to select class.
Related
The issue is simply as following, when I try to select a class that starts with a keyword , and ends with another keyword, this works fine, if and only if the element has a single class, if element has multiple classes, the selector will return an empty collection.
Here is code to explain the issue
// try removing custom-class from first element --> returns 2
alert($("div[class^='start'][class*='end']").length) // will return 1 by default , only 1 element has single class.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-class start-mid-end" data-custom="1st Div">
</div>
<div class="start-mid-end" data-custom="2nd Div">
</div>
That's because for the element with class="custom-class start-mid-end", the value of its class attribute begins with custom, not start. Remember, the attribute selectors operate on the attribute value as a single string; they don't care that the class attribute is "special" in HTML.
Regarding a solution to your problem: there aren't any without caveats. As the most practical workaround, I would suggest using multiple classes instead of just one. For example, instead of just prefix-X-suffix also add the classes prefix- -suffix and then you can select your elements simply with
$("div[.prefix-.-suffix]")
Another option would be to use filter to customize the class selection logic, e.g.
$("div").filter(function() { return /\bstart\S*end\b/.test(this.className); })
The regex \bstart\S*end\b matches any sequence of non-whitespace characters with the prefix start and the suffix end, which is what you are after.
The selectors you use refer to the whole attribute string, so class="start what ever end" will be a match.
I have some div tag below:
<div class="magazine"></div>
<div class="newsletter"></div> // I need to take this div
<div class="may-moon"></div>
If I needed div with class start with "ma", I would use $('div[class^="ma"]'), but what is opposite? thanks.
The opposite would be to use jQuery :not():
$('div:not([class^="ma"])')
You can use the negative filtering function "not" like this: $('div').not('[class^="ma"]'), or the negative selector ":not" like this: $('div:not([class^="ma"])') (as pointed by Karl-André Gagnon)
You need to use :not() Selector for this. because there is no exact opposite selector exist of [^=] and * in jquery.
:not() Selector - Selects all elements that do not match the given selector.
See more about Jquery selectors
There a opposite selector exist ! -
Attribute Not Equal Selector [name!="value"] - Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.
but use of this ! selector, you need to provide full-name of class.
$('div[class!="magazine"][class!="may-moon"]')
Try This
I have many html elements with id
like
"demo1"
"demo2"
"demo3"
and many more
"demoNth"
how to get all the elemnts using jquery?
You can use the following :
this will get all elements starting with demo
$("[id^=demo]")
Selector documentation here
Iterate over them using each() ->
$("[id^=demo]").each(function(index) {
alert(index + ': ' + $(this).text());
});
each documentation here
How about
$("[id^=demo]")
Or best way is to use classes
I would suggest giving them a class is the best way.
e.g.
<div id="1" class"group">1</div>
<div id="2" class"group">2</div>
<div id="3" class"group">3</div>
<div id="4" class"group">4</div>
You can then select all these divs using
$(".group")
$("element[id^='demo']") where element is your element type.
jQuery has a selector syntax ([attrname^=prefix]) specifically for matching string prefixes.
For a more general purpose solution which will match the ID against an arbitrary regular expression, you should select all elements that might match, and then .filter() out the ones you actually want, e.g.:
$('div').filter(function() {
return /^demo\d+/.test(this.id);
});
Like
<div id="box_1">
<div id="box_2">
<div id="box_3">
If i want to get all id's starting with 'box_' how can i do it something like this..
$("#box_" + anything )
Unfortunately wrapping the div's won't work because it will get all the other divs in side and between the box divs.
I guess i can give them all another class and reference it like that, but just wondering if there's something like this out there.. thanks.
You can use an Attribute Starts With selector:
$("div[id^=box_]");
It is possible with the attribute starts with selector as others have mentioned, but it might be better to give each element a class:
<div id="box_1" class="box"></div>
<div id="box_2" class="box"></div>
<div id="box_3" class="box"></div>
Select with:
$(".box")
Yep:
$('div[id^="box_"]');
In this case, because you are trying to use the ID selector, its better to switch to an element selector, combined with an attribute selector.
You can use an attribute selector:
$('[id^="box_"')
That will give you all elements whose id starts with "box_". If you need to, qualify it with an element:
$('div[id^="box_"')
If you dont know whether it starts or endswith any string then you can try *= selector which will look within the attribute value.
$("div[id*='box_']");
I encounter the following syntax:
$('#sourcePane input:checked~img');
I know it is selecting all input elements that are checked and also under the element of id= sourcePane ? right?
But what is ~img? what does ~ do?
also, the corresponding element in HTML is
<div data-module="Sources" data-module-id="sourcePane">
Why is it not id="sourcePane" but data-module-id="sourcePane" ??
a ~ b
This is the CSS 3 general sibling combinator. It means "Select all b elements that are next siblings to a.". It works like the adjacent sibling combinator a + b, but b does not have to immediately follow a.
data- Attributes
This is HTML5 syntax to create custom attributes. From the HTML5 spec:
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
Your selector will not work unless you either change your HTML to:
<div id="sourcePane" data-module="Sources" data-module-id="sourcePane">
or change your selector to:
$('[data-module-id="sourcePane"] input:checked~img');
The '~img' selects a sibling with the <img /> tag after the input:checked.
(see here: http://api.jquery.com/next-siblings-selector/#prevsiblings)