Question

<div id='1'></div>
<div id='1_1'></div>
<div id='1_1_1'></div>
<div id='1_1_2'></div>
<div id='1_2'></div>
<div id='2'></div>
<div id='2_1'></div>
<div id='2_2'></div>
<div id='2_2_1'></div>

Given this (psuedo) set of tags, I would like to be able to get all of the “level below” tags.
e.g.

id=1 gets 1_1 and 1_2, but not 1_1_1 etc.
id=2_2 gets 2_2_1 etc

I have tried the div[id^=1] but this returns all levels below.
Note, these are NOT nested tags, so Children doesn’t work 🙁

How can I restrict to just id_?

e.g. div[id=1_1_?]

Is there a single character wildcard, or a way of restricting the length of the selector?

Answer 1

You could use the attribute starts-with selector you mentioned, and then filter the results:

var elems = $("div[id^='1']").filter(function() {
    return this.id.length <= 3; 
});

Here’s a working example. Note that this also returns the div with just 1 as it’s id. You could prevent that by adding another condition to the return statement:

var elems = $("div[id^='1']").filter(function() {
    return this.id.length <= 3 && this.id.length > 1; 
});

Finally, note that id values cannot start with a number unless you’re using the HTML5 doctype.