如何动态地将类分配给html元素?

时间:2018-12-31 13:14:30

标签: javascript jquery

有一个加号图标。我希望单击它时将创建一个div,其中将有两个select元素,并且应该动态分配这些select元素的类。理想情况下,它应该像这样工作:

首次单击加号图标时:

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

第二次单击加号图标时:

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

当第三次单击加号图标时:

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

以此类推...

我知道可以将div添加到div(class =“ container”)append()函数,并可以分配class addClass()函数,但addClass()需要一些引用(可能是id)选择元素。但是这种引用在本质上也是动态的。

我如何完成此任务?预先感谢。

原始代码

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

      });

1 个答案:

答案 0 :(得分:1)

您可以执行以下操作:

$('.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>')
});

我不知道您HTML的{​​{1}}的样子,但是用图标删除.add应该很容易。

演示

plus icon
$('.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>')
});