Using jQuery with JSF auto-generated ids (issue with ":")

Question

I read this post Handling a colon in an element ID in a CSS selector which outlines how to select a known id that contains a colon.

What I would like to do is create a JSF list that contains images. Then using jQuery I would like to select each image and read in the id. Is this possible without writing some code to replace the colons?

Answer 1

Use jQuery to iterate over each individual img element. Assuming that your ul element has the id wx:yz:

// Use jQuery to select all images within
var imgs = $('#wx\\:yz img');

// Iterate over each one and give the image ID to the library
// only if the image actually has an ID.
imgs.each(function() {
    if(this.id && this.id.length) {
        nameOfYourLibraryFunction(this.id);
    }
});

Answer 2

It's safer to use classes instead of IDs when using JSF.