如何使用jquery获取下一个div数据属性

我正在尝试获取下一个div的数据密钥。但它给了我“未定义的”

下面是html代码

<div class="sort-arrows"><span class="fa fa-arrow-up" id="sort-up"></span><span class="fa fa-arrow-down" id="sort-down"></span></div>

<div class="flow-content" data-key="2yqz1jpdxwy2g434zyo8r7k6vml9n50d">
  <h3 class="bg-primary">Title</h3>
</div>

标题

演示--

非常感谢您的帮助

$(this).attr("data-key")

或

---

单击箭头时，您感兴趣的是箭头的父项的兄弟

$（“body”）.on（'click tap'，'s.sort arrows.fa arrow down'，函数（e）{
e、 预防默认值（）；
var$flow=$（this.parent（）.sides（“div.flow-content:first”）；
// ======================
//也可以，但更脆
// ======================
//var$flow=$（this.parent（）.next（）；
// ======================
console.log（$flow.data（“key”）；
});



$（“body”）.on（'click tap'，'s.sort arrows.fa arrow down'，函数（e）{
e、 预防默认值（）；
var elem=$（this.parent（）.attr（“类”）；
var data=$（“+elem）.next（“.flow content”）.attr（“数据键”）；
警报（数据）；
});

标题
仍然没有定义。处理程序位于arrow元素上，而不是fiddle中的flow content元素$（这）并不是@mayersdesign所期望的。完全正确，将我的（仓促！）答案留在这里作为说明
$(this).data("key")