Блог

Итак, я пытаюсь загрузить изображение с другой страницы с помощью Jquery .load(), теперь элемент, который я пытаюсь загрузить, имеет несколько дочерних элементов, которые также загружаются на текущую страницу, теперь, очевидно, я мог бы скрыть эти divs, но сначала я хочу знать, есть ли способ захватить только родительский 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>
  

Это код, который я использую прямо сейчас, но .заголовок-изображение имеет несколько дочерних элементов, как упоминалось выше.

Подводя итог, мне нужно загрузить только родительский элемент и игнорировать все дочерние элементы div, упомянутые выше, без необходимости загружать эти дочерние элементы на текущую страницу и скрывать их (если это возможно)

Насколько я понимаю, ваша цель, похоже, состоит в том, чтобы скопировать пустой 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"> необходимо указать правильную таблицу стилей для обеих страниц.

Если вы просто хотите пустой <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>')