CODEWITHSUNDEEP
javascriptjquery
Amandeep Singh
Amandeep Singh

Reputation: 1431

How to assign class to html elements dynamically?

There is a plus icon. I want that when it is clicked a div will be created which will have two select elements and class to these select element should be assigned dynamically.Ideally it should work like this:

When plus icon is clicked first time:

<div class="container">
  <div>
    <select class="selA_0">/*Options*/</select>
    <select class="selB_0">/*Option*/</select>
  </div>
</div>

When plus icon is clicked second time:

<div class="container">
  <div>
    <select class="selA_0">/*Options*/</select>
    <select class="selB_0">/*Option*/</select>
  </div>
  <div>
    <select class="selA_1">/*Options*/</select>
    <select class="selB_1">/*Option*/</select>
  </div>
</div>

When plus icon is clicked third time:

<div class="container">
  <div>
    <select class="selA_0">/*Options*/</select>
    <select class="selB_0">/*Option*/</select>
  </div>
  <div>
    <select class="selA_1">/*Options*/</select>
    <select class="selB_1">/*Option*/</select>
  </div>
  <div>
    <select class="selA_2">/*Options*/</select>
    <select class="selB_2">/*Option*/</select>
  </div>
</div>

and so on...

I know that to add div to div(class="container") append() function can be used and to assign class addClass() function can be used but addClass() would need some reference(it may be id) to select elements.But that reference would be dynamic in nature too.

How can i achieve this task? Thanks in advance.

Original Code

<script type="text/javascript">
      var i=0;
      var j=0;
      $(" .plus-icon ").click(function()
        {

            $(" .plus-container").append('<div style="float: left; width: 400px;  border: 1px solid black;width: 400px;"></i>Select your Key: &nbsp <select id="keyDropDown" name="key_name"><option disabled selected value> -- Select a Key -- </option><!--<option value="name">Name</option>--><option value="ip">ip</option><option value="country">Country</option><!--<option value="city">City</option><option value="region">Region</option><option value="device_type">Device Type</option>--><option value="device">Device</option><option value="visits">Visits</option><option value="page">Pages Visited</option><option value="items">Items Searched</option><option value="user_id">User Id</option><option value="browser">Browser</option></select><br><br></i> Select value for your Key: &nbsp <select id="valueOfKey" name="key_value"></select></div>');

            $(" #keyDropDown").addClass("keyDropDown"+i);
            $(" #valueOfKey").addClass( "valueOfKey" +j);
            i=i+1;
            j=j+1;

      });

Upvotes: 0

Views: 287

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You could do something like:

$('.add').click(function() {
  var c = $(".container > div");
  var l = c.length;
  c.last().after('<div><select class="selA_'+l+'">/*Options*/</select><select class="selB_'+l+'">/*Option*/</select></div>')
});

I don't know how the HTML of your plus icon looks like but it's should be fairly easy to remove my .add with your icon.

Demo 

$('.add').click(function() {
  var c = $(".container > div");
  var l = c.length;
  c.last().after('<div><select class="selA_'+l+'">/*Options*/</select><select class="selB_'+l+'">/*Option*/</select></div>')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div>
    <select class="selA_0">/*Options*/</select>
    <select class="selB_0">/*Option*/</select>
  </div>
</div>
<div class="add">add</div>

Upvotes: 1

Related Questions