使用属性选择器将图标应用到链接,或者通过脚本添加类是很常见的。例如:
// HTML
<a href="foo.doc">This is an ordinary text link</a>
// CSS
a[href$=".doc"] {
background: url('bar.jpg') 0 0 no-repeat;
padding-left: 2em;
}
(etc)
这在独立链接上看起来很好,我指的是这种类型的东西:
<p>Some paragraphs of text</p>
<p><a href="foo.pdf">Get the full report in a massive pretty PDF</a></p>
<p>More paragraphs</p>
但是在内联链接上看起来很糟糕,我指的是这种东西:
<p>Lorem ipsum dolor sit amet, <a href="foo.pdf">consectetur adipiscing</a> elit ... </p>
我希望能够有选择地将图标应用于第一种情况,而不是第二种情况。
那么有没有一种方法可以可靠地区分两者(使用我想象的脚本)?
尝试过 STFW,但如果这只是我的术语失败,我深表歉意。
最佳答案
为了区分两者,您可以使用 jQuery 将每个 anchor 与包含 anchor 的每个父级进行比较,如果它们匹配,则应用一种样式,如果不匹配,则应用另一种样式:
html:
<p>
Lorem ipsum dolor sit amet <a href="">link inside a paragraph with other text</a> Lorem ipsum dolor sit amet.
</p>
<p>
<a href="">link alone in a paragraph</a>
</p>
CSS:
.standalone {
background-color: red;
}
.inline {
background-color: green;
}
jQuery:
$(document).ready(function(){
$('a').each(function(){
var parent = $(this).parent().html().trim();
var myTag = $(this).wrap('<p/>').parent().html().trim();//wrap in a temp container to get the <a> as well
$(this).unwrap();
if(parent === myTag) {
$(this).addClass('standalone');
} else {
$(this).addClass('inline');
}
})
});
https://jsfiddle.net/y40o11hu/2/
这将为每个链接执行此操作,但初始选择器可以是您想要的任何内容,因此可以将其缩减为 $('a[href$=".doc"]') 或其他内容。
关于javascript - 如何区分内联链接和独立链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36039297/