javascript - 如何区分内联链接和独立链接

Question

使用属性选择器将图标应用到链接，或者通过脚本添加类是很常见的。例如:

// 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，但如果这只是我的术语失败，我深表歉意。

Answer 1

为了区分两者，您可以使用 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"]') 或其他内容。