jqueryを使用して次のdivデータ属性を取得する方法

Question

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

でデモだ - https://jsfiddle.net/v8wkt0yL/

すべてのヘルプは高く評価されています。

Answer 1

矢印をクリックすると、関心のあるものは、矢印の親の兄弟です。それでも私は、未定義を与える

$("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>

Answer 2

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

または

$(this).data("key") 

Answer 3

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>