Jquery .load() 仅父级并忽略子级

Question

所以，我正在尝试使用 Jquery .load() 从另一个页面加载图片，现在我尝试加载的元素有多个子元素，它们也加载到当前页面上，现在显然我可以隐藏这些 div，但首先我想知道是否有办法只获取父 div 而忽略子级。

我尝试过使用 parent() 方法，但由于 .load() 的工作方式不同，它没有按预期工作。 （除非我错过了什么）

$('#myNewDiv').load('/robots .heading-image');

这是来自其他页面的 HTML 代码

<div class="heading-image" style="background-image:url(imagelinkhere.png)">
<div class="heading-image_cover">
   <div class="left">
      <div class="heading-image title">Heading Title</div>
      <div class="heading-image desc">I am a desc</div>
   </div>
   <div class="right">
      <div class="heading-image stat">Stat text</div>
   </div>
</div>
</div>

这就是我现在使用的代码，但是 .heading-image 有多个子元素，如上所述。

综上所述，我只需要加载父元素并忽略上面提到的div的所有子元素，而不必在当前页面上加载这些子元素并隐藏它们（如果可能的话）

Answer 1

据我了解，您的目标似乎是将空 div 复制到新页面，同时保持与 <div> 标记关联的背景图像。

最简单的方法是添加两个页面都可以访问的样式表。例如：

CSS

.heading-image{
   background-image:url(imagelinkhere.png);
}

JavaScript

$('#myNewDiv').html("<div class="heading-image"></div>");

然后在两个 HTML 文档的头部，让 <link rel="stylesheet" href="style.css"> 指向两个页面的正确样式表。

Answer 2

如果您只想要空的<div class="heading-image"></div>，您可以使用load() 完成回调来清空它：

$('#myNewDiv').load('/robots .heading-image', function(){
    // new html exists in page now, 'this' is #myNewDiv element
    $(this).find('.heading-image').empty();
});

如果该元素内有您不想在页面中加载的图像、视频等资源，您也可以解析：

$.get('/robots').then(function(html){
    var $hImage = $(html).find('.heading-image').empty();
    $('#myNewDiv').html($hImage)
});

说了这么多，我不明白为什么你需要从另一个页面中提取一个空元素并且不能这样做：

$('#myNewDiv').html('<div class="heading-image"></div>')