Sometimes a html element is added to DOM with other script after the document is ready. I used for those cases javascript function setTimeout(). In example below I changed background images height.

// main.js   
$(document).ready(function () {
/*
     * Change image gallery sizes
     */
    setTimeout(function () {
      changeImgHeight();
    }, 200);

    function changeImgHeight() {
      if ($(".single .owl-item.active a")[0]) {
        let width = document.querySelector(".owl-item.active").style.width;
        let height = parseInt(width, 10);

        // get number containers with background image
        let num = document.querySelectorAll(".owl-item.active").length;

        if (num == 2) {
          height = parseInt(width, 10) - 180;
        }
        $(".owl-item.active .item").height(height);
      } else {
        setTimeout(function () {
          changeImgHeight();
        }, 200);
      }
    }

});

HTML markup for this example:

<body class="single">
....
<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all; width: 632px;">
<div class="owl-item active" style="width: 305.584px; margin-right: 10px;">
<a class="item photoswipe-item" href="..." style="background-image: url(...); height: 305px;"></a>
</div>
<div class="owl-item active" style="width: 305.584px; margin-right: 10px;">
<a class="item photoswipe-item" href="..." style="background-image: url(...)  height: 305px;"></a>
</div>
</div>
...
</body>

Support the project through Monobank

Monobank