有没有办法通过class过滤所有以前的元素?
Is there any way to filter all previous elements, by class?
我有一个带有 ul / li 元素的砌体画廊。为了让它们响应,我在每个“li”元素中添加它的列号作为 class,这样我可以稍后对它们进行排序。
我试图在添加新元素之前获取列中先前元素的高度。所以基本上是新“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>
主要问题'each'function.It继续总结
P.S。这是我的第一个问题,如果描述不够好,请见谅。
所以主要的问题是每个功能,因为我没有在开始时重置that.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
我有一个带有 ul / li 元素的砌体画廊。为了让它们响应,我在每个“li”元素中添加它的列号作为 class,这样我可以稍后对它们进行排序。
我试图在添加新元素之前获取列中先前元素的高度。所以基本上是新“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>
主要问题'each'function.It继续总结
P.S。这是我的第一个问题,如果描述不够好,请见谅。
所以主要的问题是每个功能,因为我没有在开始时重置that.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