jQuery和生成的SVG多边形 - 创建循环以赋予每个多边形一个唯一的类?

时间:2014-01-14 13:41:22

标签: javascript jquery svg polygon

基本的Javascript / jQuery技巧让我不知所措,我用一个生成器创建了这个svg hex网格http://francescasargent.co.uk/blogosphere/playground/hexagons4.html。如果您查看源代码(这里复制和粘贴的时间太长了!),大约有112个多边形。我试图给每个多边形一个唯一的类,只需“pg-”然后是1-112的数字,以便进一步完成工作。但我已经很难过了。作为测试,我试图遍历多边形并将svg文本更改为每个单独多边形的数量(稍后将更改为addClass)。此代码使每个svg文本项中的数字为“111”,而不是循环并为它们分配不同的升序数。我做错了什么?

$( document ).ready(function() {

polygons = $('polygon').length;

for(i=0; i<polygons;i++) {

$('polygon').each(function(i, obj) {
    $('text').text('fap'+[i]);
}); 
}
});

2 个答案:

答案 0 :(得分:0)

您没有使用唯一文本,而是选择所有文本并提供相同的文本。请按照以下代码为多边形提供文字

var x = 0;
$('text').each(function () {
    $(this).text("text" + x++)
});

要为每个多边形提供唯一的类,请遵循以下代码

var i = 0;
$('polygon').each(function () {
    $(this).addClass('pg-' + i++);
});

<强>更新

addClass似乎不适用于SVG Elements,因此请改用.attr

var i = 0;
$('polygon').each(function () {
    $(this).attr('class', function () {
        return this.className + " pg-" + i++
    });
});

注意:无需循环循环

答案 1 :(得分:0)

问题在于:

for(i=0; i<polygons;i++) {
    $('polygon').each(function(i, obj) {
        $('text').text('fap'+[i]);
    });

无需包裹for。它将循环并每次更改文本,直到达到n-1,即111.最后一次迭代将为每个中的所有多边形提供“111”。

您可以简单地使用每个索引:

$('polygon').each(function (index) {
    $(this).text("text" + index)
})

另请注意,您应该使用$(this)内的.each来定位当前元素,然后更改其text