Develop Reference

jQuery selector : 'starts-with && ends-with' doesnt work on element with multiple classes

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.

Selecting a .class inside an .id - javascript

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.

jQuery Select # id with word as prefix and counter as suffix

Is there a way to select all id's with jQuery with a prefix "my" and a suffix "0-9".
Something like these $("#my$1-4") or is it just possible with a loop ?
<div id="my1"/>
<div id="my2"/>
<div id="my3"/>
<div id="my4"/>
<div id="my5"/>

First thoughts, which seems to work well:
$('div[id^="my"]').filter(
function(){
return this.id.match(/\d+$/);
});
JS Fiddle demo.
The above selects all div elements whose id starts with the value my, and then filters the returned elements to those whose id also ends with numeric characters.
References:
attribute-starts-with selector.
filter().
Regular Expressions, at Mozilla Developer Network.

The prefix part is easily achievable with an attribute starts-with selector:
$("div[id^=my]");
But there is no selector that will allow you to specify a range of characters, so a loop will have to be involved. I would suggest filter:
$("div").filter(function () {
return /^my\d$/.test(this.id);
});

Assuming you don't have millions of elements that start with "my", you could do:
$('[id^=my]').filter(function() { return this.id.matches(/\d/) && this.id.length == 3 })
This grabs all elements that have an id starting with "my", contain a number, and are only 3 characters long (so "my54" will not match but "my6" will)

How to get all html elements with a fixed starting string

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);
});

jQuery CSS 'or' selector

I am trying to select elements of a (certain class || another class) with the same selector. How can I go about doing that?
Currently, I have:
$(".class1 .class2").each(function(idx, el) {... });
however, that only selects elements that match both classes, not one or the other.
How can I select elements that match one or both of the classes, with the same selector?

Try this
$(".class1,.class2")
http://api.jquery.com/multiple-selector/

$(".class1,.class2").each(function(idx, el) {... });
put a comma within the same selector string.
http://api.jquery.com/multiple-selector/