HTML数据属性和jQuery

好的，我正在为WordPress构建一个公文包插件。用户将能够在其内容中插入一个短代码并显示一个公文包

每个公文包都将使用jQuery，并为每个公文包提供自定义设置

我希望能够在一个页面上显示多个公文包，并初始化它们各自的jQuery参数

所以我开始向每个公文包容器添加带有设置的数据属性，每个容器上都有一个公共类

然后，我使用以下内容（简化）设置了一个JS文件：

下面是我的HTML（简化）：

... 内部投资组合材料
... 内部投资组合材料
... 内部投资组合材料

这将导致页面上的第一个公文包获得正确的参数，然后其余的公文包只是模仿第一个公文包的参数

有人对我有什么想法吗？

你的JS

var $container = jQuery('.portfolio-listing');
var $eachContainer = jQuery('#' + $container.data('portfolio-id'));

$eachContainer.imagesLoaded( function(){
    $eachContainer.isotope({
        // options
        itemSelector : '.portfolio-item.item-' + $eachContainer.data('portfolio-id'),
        layoutMode : $eachContainer.data('layout'),
    });
});

如果您希望在所有div上执行操作，则只将第一个公文包div选择到

$eachContainer

，您必须迭代对象集

$container

将您的JS更改为

var $container = jQuery('.portfolio-listing');
$container.each(function () {
    var $eachContainer = jQuery('#' + $(this).data('portfolio-id'));

    $eachContainer.imagesLoaded(function () {
        $eachContainer.isotope({
            // options
            itemSelector: '.portfolio-item.item-' + $eachContainer.data('portfolio-id'),
            layoutMode: $eachContainer.data('layout'),
        });
    });
});

---

这样，

$eachContainer

将成为每个

投资组合列表

div，而不仅仅是第一个

我们可以获得更多的代码吗？这里重复的内容有点让人困惑。添加多个结果html块等，这样我们可以看到重复。当然-添加更多的代码块。因此，基本上，我希望JS与每个容器的数据属性进行对话。完美，正是我想要的！

var $container = jQuery('.portfolio-listing');
var $eachContainer = jQuery('#' + $container.data('portfolio-id'));

$eachContainer.imagesLoaded( function(){
    $eachContainer.isotope({
        // options
        itemSelector : '.portfolio-item.item-' + $eachContainer.data('portfolio-id'),
        layoutMode : $eachContainer.data('layout'),
    });
});

var $container = jQuery('.portfolio-listing');
$container.each(function () {
    var $eachContainer = jQuery('#' + $(this).data('portfolio-id'));

    $eachContainer.imagesLoaded(function () {
        $eachContainer.isotope({
            // options
            itemSelector: '.portfolio-item.item-' + $eachContainer.data('portfolio-id'),
            layoutMode: $eachContainer.data('layout'),
        });
    });
});