jquery - 将类输出为纯文本并包含点

Question

我正在尝试从元素中获取类作为 span 中的文本并在类中插入一个点。我首先尝试用点替换空格，但没有成功。我真的需要针对各个类并为每个类添加点，所以我尝试了每个选择器：

    <span class="   foo    bar    baz   "></span> 

var cl = $('span').attr('class');

    $(cl).each(
        function(){
           var text = '.';
            $(text).insertBefore(this);
        });

    $('span').text(cl);

似乎不起作用。

例子

所以输出必须是：

.foo.bar.baz

Answer 1

您可以使用纯 JavaScript 将类名修改为字符串：

var spans = document.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++){
    var classes = spans[i].className.split(/\s+(?=[a-z0-9])/i);
    spans[i].className = classes.join(".");
    alert(spans[i].className);
}

演示：http: //jsfiddle.net/gPYnc/6/

Answer 2

您的代码实际上并没有这样做，.each因为值cl是来自$('span').attr('class');

您要做的是获取字符串并按空格将其拆分。

var cl = $('span').attr('class');

var classes = cl.split(' ');
var textList = "";
for (var i = 0; i < classes.length; i++)
{
    if (classes[i].length > 0)
    {
        textList += "."+classes[i];
    }
}

$('span').text(textList);

JSFiddle

Answer 3

你可以用一个简单的正则表达式来做到这一点。例如：

// Get class string
var cl = $('#test').attr('class');

// Replace all whitespace blocks with a .
// and remove any trailing .
var output = cl.replace(/\s+/g, '.').replace(/\.+$/, '');

console.log(output); // e.g. ".foo.bar.baz"

JSFiddle 示例在这里