Question

嘿伙计们 - 我有以下HTML：

<div>
    <span class="icon">
        <a href="#">Technology</a>
    </span>
</div>

<div>
    <span class="icon">
        <a href="#">Design</a>
    </span>
</div>

<div>
    <span class="icon">
        <a href="#">Management</a>
    </span>
</div>

我正在寻找一个简短而又甜蜜的jQuery片段，它会检测链接中的值，并将该值作为类名添加到span中，从而产生以下结果：

<div>
    <span class="icon Technology">
        <a href="#">Technology</a>
    </span>
</div>

<div>
    <span class="icon Design">
        <a href="#">Design</a>
    </span>
</div>

<div>
    <span class="icon Management">
        <a href="#">Management</a>
    </span>
</div>

我正在使用：

var categoryName = $(".icon a", this).html();
$(".icon").addClass(categoryName);

但它只取第一个链接的值并将其作为每个范围的类名称。

感谢您一如既往的帮助！

Answer 1

$(".icon").each(function(){

    $(this).addClass($(this).find("a").html());

});

JSFiddle

您也可以使用循环执行此操作：

var spans = $(".icon");

for(var i = 0; i < spans.length; i++)
{
    var cspan = $(spans[i]);
    $(cspan).addClass($(cspan).find("a").html());
}

JSFiddle

Answer 2

使用.each()使用类icon迭代所有范围。：

$('.icon').each(function(){
    $(this).addClass($(this).find('a').html())
})

<强> Working Fiddle

Answer 3

您可以使用：

1） $.each() 在课程icon

中循环播放

2） .find() 在您的范围内找到子锚点

3） .text() 获取找到的锚点的文字：

$.each($('span.icon'), function(){
    $(this).addClass($(this).find('a').text());
});

<强> Fiddle Demo

Answer 4

您可以在页面加载或某些事件下运行：

$(".icon").each(function(){
   var name = $(this).find("a").text();
   $(this).addClass(name);
});

找到链接的值并将该链接用作父元素的类名

4 个答案:

JSFiddle

JSFiddle