Question

所以我想知道如何使用jQuery将CSS类添加到具有特定文件扩展名的链接上。只要jQuery可以使用与javascript相同的原则，我可以想出自己过滤正确的链接，但我不太确定如何使用jQuery脚本来进行这些更改以及我应该如何处理图标

图标已经在网页上，如下所示：

jQuery.get('http://localhost/filename.ext', function(data) {
    var jsFile = data;
});

这是否意味着我可以在HTML背景中运行的jQuery文件中引用带有alts（例如“download”）的图标？

Answer 1

更好的方法是使用纯CSS和伪造的元素。您可以使用：before或：after，具体取决于您希望图标显示的位置。

例如，如果要定位以.pdf结尾的链接，可以使用以下代码。将您的图片放在内容中：＆＃34;＆＃34;

a[href$=".pdf"]:after {
    background : url(img/download.png) no-repeat;
    content : "";
}

您甚至可以在新窗口中获得更好的PDF和目标链接（目标=＆＃34; _blank＆＃34;）

a[href$=".pdf"][target=_blank]:after {
    background : url(img/download.png) no-repeat;
    content : "";
}

希望这有帮助！

Answer 2

您可以访问元素属性的任何部分。例如，如果您想使用alt属性作为类，则可以执行以下操作：

var $imgs = $("img");
$imgs.each(function(){
  var c = $(this).attr("alt");
  $(this).attr("class", c);
});

这将查找每个<img>，并使用class属性中的值填充alt属性。

正如您所提到的，您可以对此进行过滤，我建议您使用更具体的选择器。

您也可以压缩它：

$("img").each(function(){
  $(this).attr("class", $(this).attr("alt"));
});

修改

如果您希望在每个<img>标记之前或之内放置<a>，则会有所不同。

$("a").each(function(i, el){ var $a = $(el); if($a.attr("href").indexOf(".pdf") > 0){ var $icon = $("<img>", { src: "img/download.png", alt: "download" }).appendTo("body").position({ my: "right+5 top", at: "left top", of: $a }); } });

由于您没有提供<img>标记与HTML中的<a>标记相关的示例，因此很难确切了解其中的内容。您可以使用.position()，也可以使用CSS在链接前设置图标样式。

jQuery将CSS类添加到链接以显示链接旁边的图标

2 个答案: