Как заставить код jQuery работать, когда страница загружается с использованием отложенной загрузки - PullRequest
0 голосов
/ 24 мая 2018

У меня есть несколько div-ов, например, таких как посты в фейсбуке, и посты загружаются, используя ленивую загрузку 6 постов одновременно.внутри каждого поста есть комментарии, есть комментарии, я добавил функцию jQuery для комментариев, чтобы показать / скрыть дополнительные символы в комментариях, как показано ниже в моем коде jQuery.

проблема в том, что код работает для первых 6сообщений, но когда новые сообщения загружаются с использованием отложенной загрузки, мой код не работает, возможно ли заставить этот код работать для всех сообщений.


jQuery Code

let certainAmount = 5;
const $container = $('.main');

$container.each(function(){
  let $this = $(this);

  console.log($this.find('> *').length);

  if(($this.find('> *').length) > (certainAmount - 1) ) {
    //Selected and do something.
            i=0;
        $.each($('.main img'), function (index, value) {             
            i++;
            console.log('um inside'+i);
            $('.main img').css('display','block');
            $('.main img').css('float','left');
            $('.main img:nth-child(10)').nextAll().css('display','none');    

        });
     $('.main').has('>img:nth-child(5)').append("<a class='show-more'>See More</a>");
  }
});

<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
     <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
    <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>
<div class="main">
   <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">  <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/htc/122/grinning-face-with-smiling-eyes_1f601.png">
</div>

1 Ответ

0 голосов
/ 24 мая 2018

Код, который вы написали, находится на странице загрузки, поэтому элементы, которые готовы, когда документ загружен, работают нормально.

Чтобы работать как положено, для отложенной загрузки компонентов вам нужно создать тот же метод, пока вы загружаете компоненты с использованием отложенной загрузки.

...