时间戳

首页 > 解决方案 > 在 Grape Js 中为子元素添加属性？

javascript - 在 Grape Js 中为子元素添加属性？

问题描述

我在葡萄 js中工作了很长时间。

现在我面临一些问题。

问题：

这是我尝试在编辑器中添加的组件。

<div class="page">
      <div class="col1"></div>
      <div class="col2"></div>
 </div>

添加这些组件后，我尝试向这样的元素添加一些计算值，

element.on('component:add',function(ele){
   ele.addAttributes({
     'data-top' : topOffset,
     'data-left' : leftOffset,
   });

   editor.render();// For render Updated html
});

但是，此代码仅更新.page组件。

如何将这些 attr 添加到.col1,.col2组件内的元素中.page？

标签： javascriptjqueryhtmlcanvasgrapesjs

解决方案

我阅读了文档，似乎没有一种简单的方法可以得到你想要的东西。但是，您可以执行以下代码段之类的操作。它遍历所有子元素并向它们添加属性。

editor.on('component:add', function (ele, argument) {
   ele.setAttributes({
     'data-top' : 10,
     'data-left' : 20,
   });

   ele.attributes.components.models.forEach(function(item){
      if(item.attributes.tagName == 'div') {
         item.setAttributes({
           'data-top' : 10,
           'data-left' : 20,
         })
      }
   })

   editor.render();// For render Updated html
})

推荐阅读