针对具有条件的最后一个A元素
我需要针对最后的<a>
元素,但有一些条件。 在这种情况下,文本是通过CMS创建的,这限制了我添加类的选项。我创建了一个jsfiddle来显示我的问题。最后的<a>
必须有一个字体超棒的角度,它的:after
其他<a>
元素没有。我不能使用:last-child a
之类的东西,因为用户/文本编写器不需要默认编写链接。第一段之后还有另一段的可能性。所以没有什么是默认的,但最后的<a>
元素从段落独立与一些实际的文字必须有一个图标。针对具有条件的最后一个A元素
这很难解释,但jsfiddle会解释自己,所以请看看。如果有一个CSS解决方案,那会很好。如果不是jQuery第二。
在此先感谢!
据我所知不能单独使用CSS来完成。
怎么样的JavaScript:
var element = document.getElementsByTagName("a");
for(var i=0; i < element.length; i++) {
var el = element[i]
var x = el.parentNode.innerText.length;
var y = el.innerText.length
if (x === y) {
el.classList.add('icon');
}
}
CSS:
.icon::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
它增加了一个.icon
类未内嵌在父元素文本包裹所有<a>
元素。
您可以定位最后的p
标签。
p:last-of-type a::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
适用于文档任何部分的任何最后一个p,我们需要更多详细信息...看到我的评论我选择不作为回答:) –
正如我试图解释。有些情况下,在第一段之后没有''元素,但第一段中的一段不应该得到图标。 – Wilco
@wilco,你能否详细说明你的模板结构(看我的评论),如果你想要一个有效的答案 –
:最后一个类型的coud是一个提示,但它真的是真的吗? https://jsfiddle.net/6xLpz6nj/10/用户填充的容器是否有ID,类,特定的包装或始终坐在模板树中的相同位置? 。我们没有足够的信息有效回答:) –
实际上有一个包含所有段落的类的容器。但那里没有课程 – Wilco
没关系,它拥有的链接怎么样(href或title属性),他们有共同和特定的东西吗? ....没有你的真实情况下,它只会是有趣的答案,你会得到 –