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

I am trying to get the next div's data key. But it's giving me 'undefined'

我想获得下一个div的数据键。但它给了我'未定义'

Here is the html code

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

Demo -- https://jsfiddle.net/v8wkt0yL/

演示 - https://jsfiddle.net/v8wkt0yL/

Any help is highly appreciated.

任何帮助都非常感谢。

3 个解决方案

#1

When the arrow is clicked, your thing of interest is the arrow's parent's sibling.

单击箭头时，您感兴趣的东西是箭头的父亲的兄弟姐妹。

$("body").on('click tap', '.sort-arrows .fa-arrow-down', function(e) {
  e.preventDefault();

  var $flow = $(this).parent().siblings("div.flow-content:first");

  // ======================
  // also works but more brittle
  // ======================
  // var $flow = $(this).parent().next();
  // ======================

  console.log($flow.data("key"));
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

#2

jsfiddle

的jsfiddle

$("body").on('click tap', '.sort-arrows .fa-arrow-down', function(e) {
  e.preventDefault();
  var elem = $(this).parent().attr("class");
  var data = $("." + elem).next(".flow-content").attr("data-key");
  alert(data);
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

#3

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

or

要么

$(this).data("key")