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>')

jQuery .load（）仅作为父级，忽略子级

2 个答案: