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<n; i++) { str+=",#options_"+i+"_text"; } str[0]=''; $x1(str).miniColors({ letterCase: 'uppercase', change: function (hex, rgb) { logData('change', hex, rgb); } }); }); — ElvinD
– ElvinD, Commented Jul 20, 2012 at 5:26

Chandu · Accepted Answer · 2012-07-20 04:14:38Z

1

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);
            }
        });

    });

});

answered Jul 20, 2012 at 4:14

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bugwheels94 · Accepted Answer · 2012-07-20 04:38:44Z

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, 2012 at 4:38

answered Jul 20, 2012 at 4:14

bugwheels94

32.2k3 gold badges43 silver badges62 bronze badges

2 Comments

ElvinD Over a year ago

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 Over a year ago

Here's the whole code <script type="text/javascript"> // Start mini colors here.. var $x1=jQuery.noConflict(); var str=','; 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); }, open: function(hex, rgb) { logData('open', hex, rgb); }, close: function(hex, rgb) { logData('close', hex, rgb); } }); </script>

Community · Accepted Answer · 2017-05-23 11:48:13Z

0

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.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Jul 20, 2012 at 4:11

Thilo

264k107 gold badges527 silver badges674 bronze badges

Comments

Bali Balo · Accepted Answer · 2012-07-20 04:18:11Z

0

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++;
}

answered Jul 20, 2012 at 4:18

Bali Balo

3,4181 gold badge20 silver badges37 bronze badges

Comments

jfriend00 · Accepted Answer · 2012-07-20 04:23:01Z

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, 2012 at 4:23

answered Jul 20, 2012 at 4:17

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

ElvinD Over a year ago

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

jfriend00 Over a year ago

@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.

TrL · Accepted Answer · 2012-11-09 00:26:25Z

0

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)
    }
})
})

answered Nov 9, 2012 at 0:26

TrL

302 bronze badges

Collectives™ on Stack Overflow

How to Simplify Javascript Dynamic IDs?

6 Answers 6

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related