使用jquery [span]将span类传递给data属性

Question

这个问题在这里已有答案：

• Find nested element in query 5个答案

我正在帮助将我的span类的值传递给其父div中包含的数据属性(data-groups)，所有这些都具有相同的类(.item)。这是我目前的代码。

<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>

这有点作用，但它用data-groups填充所有"value1"属性。我希望他们都能从各自的子span类中接收数据属性。例如，第一个项目div应该有一个'data-groups'attribute的'value1',第二个与'another-value',等。

我对jquery有点生疏，但在我学习的同时学习。任何帮助表示赞赏。

Answer 1

试试这个：

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