jQuery 和生成的 SVG 多边形 - 创建循环给每个多边形一个独特的类？

Question

基本的 Javascript/jQuery 技能让我望而却步，我使用生成器创建了这个 svg 十六进制网格 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]);
}); 
}
});

Answer 1

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

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

要为每个多边形赋予唯一的类，请遵循以下代码

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

更新

addClass 似乎不适用于 SVG 元素，因此请改用 .attr

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

注意：循环中不需要循环

Answer 2

问题出在这里：

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)
})

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