How to Simplify Javascript Dynamic IDs?

Question

I am new to JS and I'm running a CMS, I have a dynamic Ids, my concern is, I would to simplify IDs to lessen JS codes by adding arrays of IDs.

Can you guys help me how to simplify this code

$x1(document).ready(function () {

    //
    // Id1 = #options_1_text
    // Id2 = #option_2_text
    // Id3 = #option_3_text
    // Id(n) = so on..

    $x1("#options_1_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });


    $x1("#options_2_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });


    $x1("#options_3_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });

    // so on..

});

You're help is greatly appreciated!

Thanks!

Hi Guys, I really appreciate your help and time answering this code question, yet this time, @Ankit 's code works on this // MiniColor Starts var $x1=jQuery.noConflict(); $x1(document).ready( function() { // // Enabling miniColors // var str='',n=10000; for (var i=1; i — ElvinD, Jul 20 '12 at 05:26

score 1 · Answer 1 · answered Jul 20 '12 at 04:14

Try this:

$x1(document).ready(function () {
    var ids = [
        "#options_1_text",
        "#options_2_text",
        "#options_3_text",
        "#options_4_text",
        .
        .
        .
        .
        ."#options_n_text",
    ];
    $x1.each(ids, function(i, el){
        $x1(el).miniColors({
            letterCase: 'uppercase',
            change: function (hex, rgb) {
                    logData('change', hex, rgb);
            }
        });

    });

});

score 0 · Answer 2 · edited May 23 '17 at 11:48

If what the code does is really the same for all elements:

 for (var i=1; i<4; i++) {
    $x1("#options_"+i+"_text").miniColors({
                letterCase: 'uppercase',
                change: function(hex, rgb) {
                    logData('change', hex, rgb);
                }
            });
 }

If the ids are not a simple sequence like that

 var ids = [ 'id1', 'another_id', 'one_more' ];

and then loop over that array.

bugwheels94 · Accepted Answer · 2012-07-20T04:38:44.560

0

  var str='',n=4;
for (var i=1; i<n; i++) {
    str+=",#options_"+i+"_text";
                         }
 str[0]='';

$x1(str).miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });

edited Jul 20 '12 at 04:38

answered Jul 20 '12 at 04:14

bugwheels94

30,681
3
39
60

I think I like this idea which give continuous or dynamic ID values, however when I applied it, it doesn't work, can you please help me what I miss? thanks! – ElvinD Jul 20 '12 at 04:35
Here's the whole code – ElvinD Jul 20 '12 at 04:36

jfriend00 · Answer 4 · 2012-07-20T04:23:01.260

0

The simplest way here would be to add a common class to each of these items and let jQuery do all the work for you so you could just do this:

$x1(document).ready(function () {

    $x1(".options_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });

});

If you can't modify the HTML, and you can assume that the items are numbered sequentially starting with 1, you could dynamically look for the existing elements:

$x1(document).ready(function () {
    var i = 1, elem;
    while (elem = document.getElementById("options_" + i + "_text")) {
        $x1(elem).miniColors({
             letterCase: 'uppercase',
             change: function (hex, rgb) {
                 logData('change', hex, rgb);
             }
        });
        i++;
    }
});

edited Jul 20 '12 at 04:23

answered Jul 20 '12 at 04:17

jfriend00

683,504
96
985
979

Hi jriend00, its sequentially numbered, however it doesn't work either, I'm running magento with dynamic ids per products, here the actual code I test var $x1=jQuery.noConflict(); $x1(document).ready(function () { var i = 1, elem; while (elem = document.getElementById("options_" + i + "_text")) { $x1(elem).miniColors({ letterCase: 'uppercase', change: function (hex, rgb) { logData('change', hex, rgb); } }); i++; } }); Thank you guys for your help! :D – ElvinD Jul 20 '12 at 04:55
@LizaMcbell - I'm afraid I would have to see the generated HTML to understand why it doesn't work. It should work if the IDs are sequential generated and start with "options_1_text" and increment the digit by one each time and there are no errors reported in running the script. But, the fact that it isn't working suggests that there's either some other error keeping it from running or the HTML isn't quite as is being described. – jfriend00 Jul 20 '12 at 05:49

score 0 · Answer 5 · answered Jul 20 '12 at 04:18

If it is a simple pattern and you don't know the number n of elements you can do it like this:

var n = 1;
while($('#options_'+n+'_text').length > 0)
{
    $x1('#options_'+n+'_text').miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });
    n++;
}

score 0 · Answer 6 · answered Nov 09 '12 at 00:26

Well, structured one here:

$x1(document)
.ready(function () {
$x1("#options_1_text")
    .miniColors({
    letterCase: "uppercase",
    change: function (a, b) {
        logData("change", a, b)
    }
}), $x1("#options_2_text")
    .miniColors({
    letterCase: "uppercase",
    change: function (a, b) {
        logData("change", a, b)
    }
}), $x1("#options_3_text")
    .miniColors({
    letterCase: "uppercase",
    change: function (a, b) {
        logData("change", a, b)
    }
})
})

How to Simplify Javascript Dynamic IDs?

6 Answers6