Question

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

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

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

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

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

似乎不起作用。

Example

所以输出必须是：

.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 example here

输出类为纯文本并包含点

3 个答案: