时间戳

首页 > 解决方案 > Jquery .load() 仅父级并忽略子级

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

问题描述

所以，我正在尝试使用 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 的所有子元素，而不必在当前页面上加载这些子元素并隐藏它们（如果可能）

标签： javascriptjqueryhtml

解决方案

据我了解，您的目标似乎是将空 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">指向两个页面的正确样式表。

推荐阅读