Есть ли способ отфильтровать все предыдущие элементы по классам? - PullRequest
Новая
       18

Есть ли способ отфильтровать все предыдущие элементы по классам?

0 голосов
/ 27 мая 2019

У меня есть галерея кладки с ul / li элементами. Чтобы сделать их отзывчивыми, я добавляю к каждому элементу ' li ' его номер столбца как класс, чтобы потом их можно было отсортировать.

Я пытаюсь получить высоту предыдущих элементов в столбце перед добавлением нового. Таким образом, в основном высота столбца перед новым элементом ' li '.

Я использую prevAll () , чтобы получить все предыдущие элементы, но я не могу объединить вычисление высоты и фильтрацию столбцов. Поэтому попытался добиться этого с помощью each () , с фильтром и с измененным селектором, я добавил эту часть кода. 

var that= this;
that.prevAll = $(this).prevAll();


that.top += $(this).prevAll('.column' + that.current_column).height(); 
// selector

that.top += that.prevAll.filter('.column' + that.current_column).height(); 
// filter

that.prevAll.each(function(){
  if(that.prevAll.hasClass('.column' + that.current_column)) {
  that.top += that.prevAll.height() + that.settings.imegesGap;
 };            
});
// .each

DOM

JQuery 

 $this.addClass('column' + that.current_column);
 $this.addClass('row' + that.row);

HTML 

<ul class="mosaic1">
    <li ><img src="img/test.png"></li>
    <li ><img src="img/test6.jpg"></li>
    <li ><img src="img/test4.jpg"></li>
    <li ><img src="img/test.3.jpg"></li>
    <li ><img src="img/test7.jpg"></li>
    <li ><img src="img/test5.png"></li>
</ul>

Основная проблема с «каждой» функцией. Она продолжает суммироваться.

P.S. Это мой первый вопрос, поэтому извините, если описание недостаточно хорошее.

1 Ответ

0 голосов
/ 29 мая 2019

Итак, основной проблемой была каждая функция, она работала неправильно, потому что я не сбрасывал тот .top в начале.Таким образом, правильный путь это 

var that= this;
that.prevAll = $(this).prevAll();
that.top = 0;

that.prevAll.each(function(){
  if(that.prevAll.hasClass('.column' + that.current_column)) {
   that.top += that.prevAll.height() + that.settings.imegesGap;
  }; 
enter code here
...