Question

The web page I am creating can have multiple div elements, each with the id ‘product-info-div’ appended with a number. Example – product-info-div1, product-info-div2, product-info-div3 etc. Each of these divs has an element called TagSelector1, TagSelector2 respectively.

The exact number of such div elements is decided at runtime.

I am writing a function which is called whenever such a div is created in the page. Right now it looks like this –

$("#product-info-div*").ready(
        function () {
            $("#TagSelector1").chosen();
            $("#TagSelector2").chosen();
            $("#TagSelector3").chosen();
            $("#TagSelector4").chosen();
            $("#TagSelector5").chosen();
        }
    );

What I want to do is get the number from the div which is calling this function, so that the hardcoding can be removed. Something like this –

$("#product-info-div*").ready(
        function () {
            var product_number = get_number_from(product-info-div*);
            $("#TagSelector"+product_number).chosen();
        }
    );

Can someone help?

Answer 1

Your code is a perfect example of why you should be using a class selector. There is no need to use id selector.

$(  
    function () {
        $(".aCommonClassOnAllElementsIWantToFind").chosen();
    }
);