单击链接并找到最近的元素

Question

我试图建立一个链接，点击后会找到并在最近的div中放入一些文字。到目前为止，这是我的代码，遗憾的是它无法正常工作：

＆＃13;

＆＃13;

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

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

.find查看子元素。您的div不是孩子，而是兄弟姐妹，所以请使用.next

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