1

我正在尝试使用这种布局：masonry column shift

当我单击主要项目时，这对我有用：

$container.find('.wrapper').click(function(){
        $(this).css({ height: "+=100" });
        // note that element is passed in, not jQuery object
        $container.isotope( 'shiftColumnOfItem', this );
});

这就是我想要的（点击孩子时触发大小变化）：

$container.find('.wrapper li').click(function(){
        var closestwrapper = $(this).closest('.wrapper');
        closestwrapper.css({ height: "+=100" });
        // note that element is passed in, not jQuery object
        $container.isotope( 'shiftColumnOfItem', this );
});

大小会发生变化，但不会移动列。我也尝试使用closestwrapper而不是this.

在演示页面上有一条我不明白的评论：

// note that element is passed in, not jQuery object
4

1 回答 1

2

“在演示页面上有一条我不明白的评论：”

// note that element is passed in, not jQuery object

DOM 元素是表示页面上元素的对象。jQuery 对象是由 jQuery 库构造的对象，通常包含一个或多个 DOM 元素。

在您的第一次isotope()通话中，您正在传递this，在这种情况下，它是一个 DOM 元素。

但在第二个版本中，如果您尝试传递closestwrapper，您传递的是一个包含 DOM 元素的 jQuery 对象。因此，您需要从 jQuery 对象中提取 DOM 元素。

jQuery 将 DOM 元素存储在从零开始的数字索引处，因此您可以使用典型的 Object 成员运算符来获取 DOM 元素。

// -----------------------------------------------------v
$container.isotope( 'shiftColumnOfItem', closestwrapper[0] );
于 2013-05-04T22:49:36.170 回答