Удалить сову-предмет, если внутри него нет изображения - PullRequest
Новая
       13

Удалить сову-предмет, если внутри него нет изображения

0 голосов
/ 08 сентября 2018

Я использую 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');
});

Есть предложения? Спасибо.

1 Ответ

0 голосов
/ 08 сентября 2018

Согласно вашему html правильный селектор - : пусто .

Вам необходимо использовать 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>
...