Question

HTML

  <h2 class="tm section-title margin-l-10">Normal Cards<button class="tm bg-dark btn-tiny margin-b-10 float-r js-show-code">show code</button></h2>
    <div class="grid-100">
      <code>
        &lt;div class=&quot;<span class="tm bg-win blue">tm card</span>&quot;&gt;
          <span class="tm lightyellow">...</span>
        &lt;/div&gt;
      </code>
    </div>

JAVASCRIPT（ jQuery ）

$('.js-show-code').click(function(){
  $(this).closest('code').slideToggle()
});

我还在学习Javascript和Jquery，我不知道我做错了什么。我无法选择<code>

它始终返回：[prevObject: r.fn.init[1]]

Answer 1

.closest 用于查找相应closest的{{1}}个父级。您的按钮包含在element元素内，而h2将closest包含button，因此导航方向与h2相反。您对parents的工作原理有错误的理解。您需要做的是，使用.closest导航至h2，并按照目前closest('h2')获取其next元素和find必需code元素你有自己的结构。以下是DOM。

＆＃13;

snippet

＆＃13;

$('.js-show-code').click(function() {
  $(this).closest('h2').next().slideToggle()
});

＆＃13;

Answer 2

closest()通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。您正在寻找与button.js-show-code无关的元素。

尝试

 $('.js-show-code').click(function(){
      $(this).closest('h2').next(".grid-100").find("code").slideToggle()
    });

以下是fiddle

Answer 3

.closest（）在dom中向上遍历，因此它永远不会到达代码元素。如果必须使用$（this）来查找代码元素，则可以执行以下操作：

$('.js-show-code').click(function(){ 
  $(this).parent().siblings().find('code').slideToggle();
});

或者这样做（将整个事物包装在一个容器中）：

<div class="container">
  <h2 class="tm section-title margin-l-10">Normal Cards
    <button class="tm bg-dark btn-tiny margin-b-10 float-r js-show-code">show code
    </button>
  </h2>
  <div class="grid-100">
    <code>
      <span class="tm bg-win blue">tmcard</span>
      <span class="tm lightyellow">...</span>
    </code>
  </div>
</div>


$('.js-show-code').click(function(){
  $(this).closest('container').find('code').slideToggle();
});

nearest（）不选择元素

3 个答案: