javascript - 在多个属性末尾添加数字

Question

我试图获取目标 div 的末尾数字，用末尾添加的数字 (_1) 替换并连接两个属性 (js-data-reveals)。

我知道这与我用来替换属性的正则表达式有关，但我无法弄清楚。

希望能帮到你。

$('#js-form-group-UPLOAD_DOCUMENT_ID_1').find('input').each(function() {
  var attrName = 'js-data-reveals';
  var $el = $(this);
  //Get Last Digit from ID
  var idNumber = $el.attr('id').match(/\d+$/);
  var attrs = $el.attr(attrName);
  //Split the two attributes in js-data-reveals
  var data = attrs.split(',').map(function(item) {
    return item.replace(/.{0}$/, function(idNumber) {
      return idNumber
    });
  });
  $el.attr(attrName, data.join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="js-form-group-UPLOAD_DOCUMENT_ID_1">
  <fieldset>
    <input type="file" class="form-control" id="UPLOAD_DOCUMENT_ID_1"
           js-data-driven="true"
           js-data-reveals="DOCUMENT_TYPE,UPLOAD_DOCUMENT_DESCRIPTION">
  </fieldset>
</div>

Answer 1

match() 返回一个数组。

可以使用 attr(attrName, function) 来简化此操作

$('input[js-data-reveals]').attr('js-data-reveals', function(_, existing) {
  var idNumber = this.id.match(/\d+$/)[0];
  return existing.split(',').map(function(s) {
    // replace number if it already exists or add it if it doesn't
    return s.match(/_\d+$/) 
           ? s.replace(/\d+$/, idNumber)
           : s += '_' + idNumber;
  }).join();
});


console.log($('#UPLOAD_DOCUMENT_ID_1').attr('js-data-reveals'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="js-form-group-UPLOAD_DOCUMENT_ID_1">
  <fieldset>
    <input type="file" 
       class="form-control" 
       id="UPLOAD_DOCUMENT_ID_1" 
       js-data-driven="true" 
       js-data-reveals="DOCUMENT_TYPE,UPLOAD_DOCUMENT_DESCRIPTION_999">
  </fieldset>

</div>