Get id of elements where the ids are dynamically generated

Question

I have a set of elements that have been generated dynamically through Handlebars as seen below

         {{#floor as |room i|}}
            <div class="btn-group-toggle" data-toggle="buttons" >
              <label class="btn btn-secondary" id="{{id}}">
                <input type="checkbox" autocomplete="off"> {{name}}
              </label>
            </div>
         {{/floor}}

As you can see, the elements are created with id="{{id}}". But when the page finishes loading, I want to hide these elements until a user clicks a button. I'm finding it hard to get the dynamic ids

Currently, I'm using JQuery as seen below

    $(document).ready(function () {
        $('#{{id}}').hide();
    });

this works with known ids, but not in this case where I don't know the id

Put a common class on all the elements instead. Avoid putting `id` attributes in repeated/dynamically generated content. — Rory McCrossan, Sep 12 '22 at 09:27
You can also hide elements by class using JQuery, or do you want the ID? — FUZIION, Sep 12 '22 at 09:27

score 0 · Answer 1 · answered Sep 12 '22 at 09:29

0

If you are trying to hide the element you can also select a unique class.

      {#floor as |room i|}}
        <div class="btn-group-toggle" data-toggle="buttons" >
          <label class="btn btn-secondary unique-class" id="{{id}}">
            <input type="checkbox" autocomplete="off"> {{name}}
          </label>
        </div>
     {{/floor}}

Using JQuery:

    $(document).ready(function () {
    $('.unique-class').hide();
});

answered Sep 12 '22 at 09:29

FUZIION

1,606
1
6
19

1

Why replace an unique identifier with a unique class? And why is `unique-class` in your example not unique? – Andreas Sep 12 '22 at 09:30
What do you mean? – FUZIION Sep 12 '22 at 09:31

Get id of elements where the ids are dynamically generated

1 Answers1