javascript - 当 child 被触发时，同位素 columnshift 不起作用

Question

我正在尝试使用此布局: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 );
});

这就是我想要的(点击 child 时触发尺寸变化):

$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

Answer 1

"On the demo page there is a comment that I don't understand:"

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

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

在您的第一个 isotope() 调用中，您将传递 this，在这种情况下它是一个 DOM 元素。

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

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

// -----------------------------------------------------v
$container.isotope( 'shiftColumnOfItem', closestwrapper[0] );