【问题标题】:Is there any way to filter all previous elements, by class?有没有办法按类过滤所有以前的元素?
【发布时间】:2019-05-27 14:39:59
【问题描述】:

我有一个带有 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>

'each'函数的主要问题。不断总结。

附:这是我在这里的第一个问题,如果描述不够好,请见谅。

【问题讨论】:

  • 看起来您为 prevAll()filter() 调用提供了无效的选择器。
  • 请同时提供您的 DOM 结构。 column 选择器不是有效的选择器。它应该是#myId.myClassNamebutton(最后一个可以是任何元素名称)。如果 column 是一个类,它看起来像:.prevAll(".column").prevAll(".column " + that.current_column)
  • 非常感谢,这里是一个错误,但代码很好,我更新了我的问题。
  • 你能为你的问题提供一些 HTML 结构吗?还请格式化问题,以便在代码块中包含所有代码。它将帮助每个人更快更好地回答您。
  • 感谢您的回复,我错过了空间,HTML已满,其他一切都在jquery中完成

标签: javascript jquery masonry


【解决方案1】:

所以主要问题是每个函数,它工作错误,因为我没有在乞求时重置 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

【讨论】:

    猜你喜欢
    • 2023-01-26
    • 2020-02-23
    • 2011-09-12
    • 2012-06-02
    • 2017-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多