Question

我的布局如下：

<header class="header">
    <div class="logo">Logo Here</div>
    <nav class="menu">Menu Here</nav>
</header>

<div class="container">
    <aside class="aside">
        <!-- Here are the Buttons that Filters the Content in .main-content class -->
    </aside>
    <div class="main-content">
        <!-- The list of contents here are shown according to the filter in sidebar -->
        <!-- The contents are lets say only tables and Ajax button does its filter -->
        <div class="export-link">Export Link</div> <!-- This export list is created by Ajax and for every filter value the link changes -->
    </div>
</div>

<footer class="footer">
    <div class="some-links">Some Links</div>
</footer>

我希望将div.export-link放在nav.menu。

起初我做了类似

的事情

if($('.new__nav-class').length === 0 ){
    $('.menu, .export-link').wrapAll('<div class="new__nav-class"> </div>');
}

这会将div.export-link和nav.menu置于标题部分中的新div.new__nav-class内，我可以应用CSS使其漂亮。

然而问题是它不再采用过滤器值。 link内的.export-link曾根据href="/page?Thisfilter-Thatfilter"等过滤器进行更改，但由于我将包装器放在div的顶部并将其放在菜单中，因此链接已变为静态

任何解决方法如何解决这个问题？

Answer 1

检查您的DocType

尝试使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Answer 2

位置：如果您只需要在页面上的其他位置移动字段，绝对可能会对您有效。只要使其父位置：相对，它应该看起来适合所有浏览器。（当然，你要检查一下。）

Answer 3

我认为您可以使用ajaxStop事件来查看链接是否已更改并将其复制到您想要的新div中。 ajaxStop是每当ajax响应返回到页面时发生的事件。下面的javascript说等待ajax响应。当响应发生时，获取＃old-div中的html并将其放入#new-div：

<html>
<head></head>
<body>
  <header>
    <div id="new-div"></div>
  </header>
  <div class="other-container">  
    <div id="old-div">link stays updated here</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $(document).ajaxStop(function() {
        var link = $('#old-div').html();
        $('#new-div').html( link );
      });
    });
  </script>
</body>
</html>

jQuery将DOM元素移到父元素之外

3 个答案: