Question

I have a problem with jQuery. In my HTML Code I have some elements with rising numbers like this:

<ul class="flexer-0"> ... <ul class="flexer-1"> ... <ul class="flexer-2">

This classes the ul get with this code:

$('ul').addClass(function(index) {
    return 'flexer-' + index;
});

How am I able to select this elements later by jQuery.

My idea was like this:

$("ul.flexer-0") ...
$("ul.flexer-1") ...
$("ul.flexer-2") ...

This is stressful, because it will be become a long page with many ul-lists. It should be possible to get the index-number with jQuery.

Has anyone an idea?

Kai

Answer 1

If the flexer-n is the only class in the element’s class attribute, you can use an attribute starts with selector to select all matches:

$('ul[class^="flexer"]')

That will match any ul whose class attribute starts with flexer.

But note that it will not work if you have other classes on, for instance:

<ul class="foo flexer-3">

---

I’d take a step back and ask: Why do you have all of these flexer-n classes? It sounds like a single class, perhaps combined with ids or perhaps a data-* attribute on the individual flexers, would make more sense.