jQuery insertAfter() 没有按预期工作

Question

我正在尝试获取#filters 及其所有内容并将其插入到以下结构之后：

<div id = "top-level">

  <div id = "sub-level-1">
    <div class = "another-level">
      <div class = "last-level">
        <nav class = "nav-menu"></nav>
        <!-- insert #filters here -->
      </div>
    </div>
  </div>

  <aside>
    <div id = "filters"> 
      <div id = "filters-form">
        <div class = "more-contents"></div>
      </div>
    </div> 
  <aside>

</div>

很遗憾，我无法让它按预期工作。它似乎无法“找到” .nav-menu 并将其插入之后，尽管我可以在更高级别的元素之后插入它。

// this works
var filters = $("#filters");
filters.insertAfter("#sub-level-1");

// doesn't work
var filters = $("#filters");
filters.insertAfter(".nav-menu");

谁能帮忙？

Answer 1

我对其进行了重新设计并使其正常工作。请记住，我输入了一些文本，以便我可以轻松地检查元素。

var filters = $("#filters");
filters.insertAfter(".nav-menu");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "top-level">
  <div id = "sub-level-1">
    <div class = "another-level">
      <div class = "last-level">
        <nav class = "nav-menu">bbb</nav>
        <!-- insert #filters here -->
      </div>
    </div>
  </div>
  <aside>
    <div id = "filters"> 
      <div id = "filters-form">
        <div class = "more-contents">aaa</div>
      </div>
    </div> 
  </aside>
</div>

我做的一个编辑是你的旁边没有结束标签，只有两个开始标签，所以我修复了这个问题。