Question

因此，代码的第一部分应该可以正常工作，单击时，两个网格和列表视图在views-div中加载，但是，我希望使用jquery在views-div中显示默认视图，我试过使用clone和prependto加载，但它不起作用。关于如何做到这一点的任何建议？

注意：我从后端加载的内容有标签和ID，所以如果我使用html标记在views-div中显示默认内容，则重复内容。所以我希望如果使用jquery加载内容，重复将不会发生。

这是一个演示http://jsfiddle.net/soulsurfer/eta0uyye/

$(document).ready(function() {

$('.iw-grid-select, .iw-list-select').on('click', function() {
    var aID = $(this).attr('href');
    var elem = $('' + aID).html();
    $('#iw-grid-view').fadeOut("slow", 1000);
    $('#iw-listview').fadeOut("slow", 1000);
    $('#iw-views-div').html(elem);

});

$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
});

Answer 1

最简单的解决方案可能是触发点击事件

＆＃13;

$(document).ready(function() {

  $('.iw-grid-select, .iw-list-select').on('click.view', function() {
    var aID = $(this).attr('href');
    var elem = $('' + aID).html();
    $('#iw-grid-view').fadeOut("slow", 1000);
    $('#iw-listview').fadeOut("slow", 1000);
    $('#iw-views-div').html(elem);
  }).first().trigger('click.view');


});

＆＃13;

.iw-listview,
.iw-grid-view {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iw-filter-col ">
  <a href="#iw-grid-view " class="iw-grid-select ">grid view link</a>&nbsp;
  <a href="#iw-listview " class="iw-list-select ">list view link</a>
</div>
<div class="row iw-listing-view-row">
  <div class="iw-grid-view" id="iw-grid-view">Grid view content</div>
  <div id="iw-listview" class="iw-listview">list view content</div>
  <div class="iw-views-div" id="iw-views-div">Content loading column</div>
  <div id="loading"></div>
</div>

＆＃13;

Answer 2

我知道这已经解决了，但是如果有人想知道OP出了什么问题，我有一个理论。

此：

$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");

应改为：

$( "#iw-grid-view" ).find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");

如果.iw-grid-list-col元素是#iw-grid-view的直接子元素，则在find()的返回值调用时，contents()将找不到它。这是因为find()搜索了元素的后代。在这种情况下，contents()的返回值将包含.iw-grid-list-col元素，而find()将找不到它，因为它是find()所属的数组的成员调用，而不是数组成员的后代。

从该函数调用链中删除contents()允许find()搜索#iw-grid-view的所有后代，而不仅仅搜索其直接子项的后代。

使用jquery在目标div中加载内容

2 个答案: