Printing value of custom attributes on multiple divs

November 18, 2022

I am working on a Shopify store where there are multiple divs like below:

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="One"></div>

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Two">

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Three">

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Four">

I want to get the value of custom attribute data-variant-option-chosen-valueand print that into <span class="selected-variant"></span>

I tried reading the custom attribute value by following jQuery without any success

$(document).ready(function() {
$('.options-selection__option-values').each(function() {
  console.log($(this).attr('data-variant-option-chosen-value'));
});

>Solution :

Get the value of attribute using $(this).attr("data-variant-option-chosen-value"), concatenate it, set it to the required target.

Also your template and script has some errors. divs missing closing tag and the $(document).ready(function () { missing the cloaing tag

$(document).ready(function () {
  let val = ''
  $(".options-selection__option-values").each(function () {
    val += $(this).attr("data-variant-option-chosen-value");
  });
  $(".selected-variant").text(val)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="selected-variant"></span>
<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="One"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Two"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Three"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Four"
></div>