javascript - 使用 div 中的数据创建按钮

Question

所以我从wordpress post创建了这些div，它们的数据属性取自php <?php echo $rengdata->format('Y-m'); ?>

<div class="renginiai-box">
     <div class="col-sm-3" data-renginiolaikas="2017-09"></div>
     <div class="col-sm-3" data-renginiolaikas="2017-09"></div>
     <div class="col-sm-3" data-renginiolaikas="2017-09"></div>
     <div class="col-sm-3" data-renginiolaikas="2017-10"></div>
</div>

我现在需要的是创建一个具有唯一日期的按钮。结果应该是这样的。

<div class="laikotarpis">
      <button value="2017-09" class="laiko-btn">2017 09</button>
      <button value="2017-10" class="laiko-btn">2017 10</button>
</div>

我不知道什么功能适合这个。我应该制作数组还是有一个 jQuery 函数可以实现此目的

Answer 1

您可以使用 jQuery 迭代具有数据属性 data-renginiolaikas 的所有元素并附加一个按钮:

$('[data-renginiolaikas]').each(function(s, e) {
  var val = $(this).attr('data-renginiolaikas');
  if(!$('.laikotarpis button[value=' + val + ']').length) {
  $('.laikotarpis').append('<button value="' + val + '" class="laiko-btn">' + val.replace('-',' ') + '</button>');
  }
});

示例:https://codepen.io/anon/pen/KZQgBw