點擊一個鏈接，並找到最接近的元素

Question

我試圖有一個鏈接，點擊後，會發現並把一些文字放在最接近的下來。這裏是我到目前爲止的代碼，其可悲的是不起作用：

$('.products').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    var pID = $(this).attr('data-pID'); 
 
    $(this).find('.categories').html(pID); 
 

 
});

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

 
<ul style="margin-left:5px; margin-top:10px;"> 
 

 
    <li> 
 
    <a href="#" style="cursor:pointer;" class="products" data-pid="1">Product A</a> 
 
    <div class="categories"></div> 
 
    </li> 
 

 
    <li> 
 
    <a href="#" style="cursor:pointer;" class="products" data-pid="2">Product B</a> 
 
    <div class="categories"></div> 
 
    </li> 
 

 
</ul>

Answer 1

.find着眼於子元素。您div是不是一個孩子，它的兄弟姐妹，所以使用.next

$(this).next('.categories').html(pID);