Passing span classes to data attribute with jquery [duplicate]

Question

I am after some assistance in passing the value of my span classes to a data attribute (data-groups) contained in their parent divs all with the same class (.item). Here is my current code.

<div class="item" href="#" data-groups="">
   <div class="caption">
      <p><span class="value1"></span>Description</p>
    </div>
</div>

<div class="item" href="#" data-groups="">
   <div class="caption">
      <p><span class="another-value"></span>Description</p>
    </div>
</div>

<div class="item" href="#" data-groups="">
   <div class="caption">
      <p><span class="third-value"></span>Description</p>
    </div>
</div>

<script type="text/javascript">
$(".item").attr("data-groups", function() {
  return $('.caption p span').attr('class');
});
</script>

This works somewhat but it populates all data-groups attributes with "value1". I am wanting them all to receive the data attribute from their respective child span classes. Eg, First item div should have a 'data-groups'attribute of 'value1', second with 'another-value', etc.

I'm a little rusty with jquery but learning as I go. Any assistance is appreciated.

try ` $(this).find('.caption p span').attr('class')`

Chiller
– Chiller

2017-12-19 09:24:55 +00:00
Commented Dec 19, 2017 at 9:24 — Chiller
– Chiller, Commented Dec 19, 2017 at 9:24

Hanif · Accepted Answer · 2017-12-19 09:28:29Z

1

Try this:

$(".item").attr("data-groups", function() {
  return $(this).find('.caption p span').attr('class');
});

answered Dec 19, 2017 at 9:28

Hanif

3,8451 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lardlad84 Over a year ago

Thank you! I knew it was something simple

Collectives™ on Stack Overflow

Passing span classes to data attribute with jquery [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related