Question

jQuery 动态创建元素

2014-08-06

60

javascript jquery

我有一个使用 ColorBox 的 javascript 函数。 <a rel 链接指向一个自动分配给日期（即 20140806）的文件夹。我该如何更有效地做到这一点，这样我就不必像下面的示例一样为每个日期都这样做了

<script type="text/javascript">
$(document).ready(function(){
    $("a[rel='20140804']").colorbox();
    $("a[rel='20140805']").colorbox();
    $("a[rel='20140806']").colorbox();
});
</script>

Answer 1

您可以使用前缀匹配来捕获以 201 （或 20 ，适用于本世纪的其余时间）开头的任何 rel 属性：

$(document).ready(function(){
  $("a[rel^='201']").colorbox();
});

请参阅属性以选择器开头

Answer 2

您还可以执行以下操作：

$("a").each( function(){

   if ( $(this).attr(rel) == 'myValue' ){
       $(this).colorbox();
   }
});

对于文档中的每个超文本，检查“rel”属性是否与您想要的匹配

Answer 3

正如 Rocket Hazmat 所说，您可以向要应用颜色框的链接添加 CSS 类。在形成 HTML 链接和 rel 属性的同一位置，您必须添加 CSS 类，因此您的 HTML 将如下所示：

<a href="/link/to/the/folder_1" class="colorbox-me">Folder 1</a>
[...]
<a href="/link/to/the/folder_N" class="colorbox-me">Folder N</a>

<script type="text/javascript">
$(document).ready(function(){
    $("a.colorbox-me").colorbox();
});
</script>

除了描述当前文档与链接文档的关系外，不鼓励将 rel 属性用于任何目的。 rel 属性通常由搜索引擎使用。 rel 属性的可能值可在此处找到。