如果里面没有图像，请删除 owl-item

Question

下面 HTML 我使用 owlCarousel。因为我用ajax显示这个HTML的内容，所以由于某些原因我无法处理哪个项目没有图像。

<div class="popular">
   <div class="item"><div class='item_inside'><img src="../img/p1.png"></div></div>
   <div class="item"><div class='item_inside'><!--No Image--></div></div>
   <div class="item"><div class='item_inside'><img src="../img/p2.png"></div></div>
   <div class="item"><div class='item_inside'><img src="../img/p3.png"></div></div>
</div>

我想删除哪个项目没有图像，然后我在下面使用 script 但它似乎删除了所有项目。

$owl = $(".popular");
$owl.on('initialized.owl.carousel', function(event){ 
    $('.item_inside').each(function(){
        if ($(this).find('img').length) {

        }else{
            $(this).closest('.owl-item').remove();
        }
    });
});
$owl.owlCarousel(
});

如果我将其添加到 window.load 中，则效果不佳。有时，它会在 Firefox 中触发而不工作。

更新 1：我的 Ajax 函数调用是这样的。

$('.loadcontent').each(function(){
   ajaxfire();
   //this will append to popular section
}).promise().done(function(){ 
   $owl = $('.popular');
   $owl.on('initialized.owl.carousel', function(event) {
    $(this).find('.item_inside:empty').each(function(idx, ele) {
        console.log('removed --> ' + $(this).closest('.owl-item').html());
        $(ele).closest('.owl-item').remove();
    });
   });
   $owl.owlCarousel();
   $owl.owlCarousel('update');
});

有什么建议吗？谢谢。

Answer 1

根据您的 html，正确的选择器是 :empty。

您需要使用dom ready event。

$(function () {
  ...put your code here....
})

$owl = $(".popular");
$owl.on('initialized.owl.carousel', function (event) {
    $(this).find('.item_inside:empty').each(function (idx, ele) {
        console.log('removed --> ' + $(this).closest('.owl-item').html());
        $(ele).closest('.owl-item').remove();
    });
});
$owl.owlCarousel();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="popular">
    <div class="item">
        <div class='item_inside'><img src="https://dummyimage.com/100x100/000/fff&text=1"></div>
    </div>
    <div class="item">
        <div class='item_inside'><!--No Image--></div>
    </div>
    <div class="item">
        <div class='item_inside'><img src="https://dummyimage.com/100x100/000/fff&text=3"></div>
    </div>
    <div class="item">
        <div class='item_inside'><img src="https://dummyimage.com/100x100/000/fff&text=4"></div>
    </div>
</div>

如果里面没有图像，请删除 owl-item

Remove owl-item if it has no image inside

jquery

owl-carousel