Question

我想通过迭代特定类的多个div来添加唯一ID。并将这些元素的id用于其他divs中的特定属性。

如摘要所示，我已经迭代allTabsContent并将原来的ID替换为新的ID。另一方面，我希望allTabs使用来自id的新allTabsContent的属性。

下面的代码使我总是得到最后的newElementId。

let productId = '102334';

$('.tab-content > .pdp-tab-content').each(function () {
    let contentId = $(this).attr('fortab');
    let newElementId = contentId + '_' + productId;
    $(this).attr('id', newElementId);
});

$('.nav-tabs > .pdp-tab').each(function () {
    let tab = $(this).attr('tab');
    //let refTab = '#' + tab + newElementId;
    //$(this).attr('href', refTab);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="nav nav-tabs" role="tablist">
  <a class="nav-item nav-link pdp-tab" data-toggle="tab" role="tab" tab="allergen">Allergen Information</a>
  <a class="nav-item nav-link pdp-tab active" data-toggle="tab" role="tab" tab="overview">Overview</a>
  <a class="nav-item nav-link pdp-tab" data-toggle="tab" role="tab" tab="nutritionInfo">Nutrition Info</a>
  <a class="nav-item nav-link pdp-tab" data-toggle="tab" role="tab" tab="prepAndUsage">Preparation & Usage</a>
</div>
<div class="tab-content">
  <div class="tab-pane fade show pdp-tab-content" fortab="allergen" role="tabpanel">                                
      Allergen
  </div>
  <div class="tab-pane fade show pdp-tab-content active" fortab="overview" role="tabpanel">Overview                               
  </div>
  <div class="tab-pane fade show pdp-tab-content" fortab="nutritionInfo" role="tabpanel">
      Nutrition Info
  </div>
  <div class="tab-pane fade show pdp-tab-content" fortab="prepAndUsage" role="tabpanel">Preparation & Usage</div>
</div>

预期结果

在tab-content的子级中插入新的ID
使用href的{{1}}属性的新ID

.nav-item

迭代元素并替换新的ID，并将该ID用于其他div中的属性

0 个答案: