如何獲得使用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>