Question

下面我将owlCarousel用于HTML。因为我使用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中运行。

Update1：我的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

1 个答案: