Проверьте, есть ли у div фоновое изображение

Question

Я пытаюсь проверить, есть ли у определенного div заданный URL-адрес фонового изображения.

Вот структура без фонового изображения:

<div id="page-header">
  <div class="bg">
    <div class="bg-layer-upper-image" style=" background-image: url();">
    </div>
  </div>
</div>

А вот структура с одним набором(они динамические):

<div id="page-header">
  <div class="bg">
    <div class="bg-layer-upper-image" style=" background-image: url('https://example.com/images/background-1.jpeg');">
    </div>
  </div>
</div>

А вот мой JQuery - он всегда думает, что есть фоновое изображение:

if ( $('#page-header').find('.bg-layer-upper-image').css('background-image') != 'url()' ) {
  alert('There is a background image');
}

Есть идеи, почему это так?

Answer 1

По какой-то причине, когда вы используете Jquery для проверки URL фонового изображения и если это "url ()", он оценивается как window.location.Например, в jsfiddle он оценивается как "url (" https://fiddle.jshell.net/_display/")"

Так что попробуйте проверить без jquery

if ($('#page-header').find('.bg-layer-upper-image')[0].style.backgroundImage 
   != 'url("")') {
  alert('There is a background image');
}

Answer 2

В моем случае решение в конечном итоге использовало search() для проверки, содержит ли URL-адрес фонового изображения каталог для загрузки, поскольку, если он пуст, URL-адрес будет просто URL-адресом страницы

$background_image_url = $('#page-header').find('.bg-layer-upper-image').css('background-image');

if ( $background_image_url.search( 'wp-content' ) != -1 ) {

    // Do stuff

}