Question

我有这种情况。

在标题<h2></h2>中，我想在文本之前添加fontawesome图标。防爆。

  <h2 id="test"><i class="fa fa-cog"></i> THIS IS TITLE</h2>

我将为所有标题添加手动图标，但如果任何标题保持为空（没有图标），则脚本添加默认图标

  <i class="fa fa-angle-double-left"></i>

我已尝试使用此脚本，但它无效。

$("#test(:empty)").append('<h2><i class="fa fa-angle-double-left"></i></h2>');

有任何解决此问题的建议吗？

编辑我需要侧边栏中的所有块。块的结构是：

        <div class="sidebar">
        <h2><i class="fa fa-users"></i><a href="#"> Title 1</a></h2>
        <ul>
                        <li>

                            <div class="user"></div>
                        </li>
        </ul>
    </div>

和2-nt侧栏相同的班级不同的标题

        <div class="sidebar">
        <h2><i class="fa fa-users"></i><a href="#"> Title 2</a></h2>
        <ul>
                        <li>

                            <div class="user"></div>
                        </li>
        </ul>
    </div>

第3块没有图标

        <div class="sidebar">
        <h2>HERE ADDD DEFAULT ICON <a href="#"> Title 1</a></h2>
        <ul>
                        <li>

                            <div class="user"></div>
                        </li>
        </ul>
    </div>

我希望现在很清楚

Answer 1

您要向h2追加h2。更好的是，将你的html设置为：

$("#test(:empty)").html('<i class="fa fa-angle-double-left"></i>');

此外，您不应该为多个元素提供相同的id。为此，您应该使用类并调用如下：

$(".test(:empty)").html('<i class="fa fa-angle-double-left"></i> My default title!');

Answer 2

标题<h2></h2>中的
我想在文本
之前添加fontawesome图标

$("h2(:empty)").html(function(){
    return "<i class="fa fa-angle-double-left"></i>"+this.innerText;
});

注意$('#test(:empty)')会搜索#test的第一个元素，我猜你已经有一个h2非空。

您 should not 的元素具有相同的ID，在文档中必须是唯一的。使用data-*属性 - data-id

<h2 data-id="test">....

$("h2[data-id='test'](:empty)")

或上课

<h2 class="test">....

$("h2.test(:empty)")

Answer 3

您可以使用Pseudo-Classes来完成CSS。

.sidebar h2:empty:before {font-family: 'FontAwesome';content: '\f100';}
.sidebar h2:before {font-family: 'FontAwesome';content: '\f0c0';}

<div class="sidebar">
    <h2>User Name</h2>
</div>

JSFiddle

为fontawesome添加append（）或appendTo（）

3 个答案: