根据数据大小属性将类添加到LI元素

Question

我正在使用Gridster for Wordpress来控制砌体样式网格布局的排列。 Gidster基本上允许网站管理员实时重新排序/调整帖子大小（见截图）

现在作为一项规则，我只想使用多种网格尺寸（1x1,1x2,2x2）。网格的标记输出如下：

1x1：<li data-sizex="1" data-sizey="1" class="gs_w">

1x2：<li data-sizex="1" data-sizey="2" class="gs_w">

2x2：<li data-sizex="2" data-sizey="2" class="gs_w">

您可以看到网格大小由HTML 5数据属性决定＆＃39; data-sizex＆＃39;和＆＃39;数据大小＆＃39;我想在页面加载时使用Jquery检查这些属性并分别添加类..

例如，网格大小为1x1的元素（data-sizex =＆＃34; 1＆＃34; data-sizey =＆＃34; 1＆＃34;）将具有＆＃39; 1x1＆＃的类39;

我相信我需要使用属性选择器，但有点不确定如何继续。

$("li[data-sizex='1']")

Answer 1

您可以使用每个解析并获取数据元素来创建类

$('li').each(function(){
    $(this).addClass($(this).data('sizex') + "x" + $(this).data('sizey'));
});

编辑以限制特定元素的添加类，例如OP在评论中提到的特定元素的后代，我们可以扩展选择器。

$('.gridster li').each(function(){...

Answer 2

$('li').each(function(){
    $(this).addClass($(this).attr('data-sizex') + "x" + $(this).attr('data-sizey'));
});