Question

Forgive my newbiness, but here's what I'm trying to do:

I am trying to make a YouTube gallery using fancybox for a friend. It will have several items following this layout:

<a href="youtubevideo1" class="fancybox" title="title1">
    <img src="imggoeshere" />
</a>
<a href="youtubevideo2" class="fancybox" title="title2">
    <img src="imggoeshere" />
</a>
<a href="youtubevideo3" class="fancybox" title="title3">
    <img src="imggoeshere" />
</a>
<a href="youtubevideo4" class="fancybox" title="title4">
    <img src="imggoeshere" />
</a>

What I want to do is use jquery to go through each <a> tag, retrieve the title, and then print it into something like this:

<div class="title">titlegoeshere</div>

after each <a> tag is closed.

I've tried to modify a bunch of different snippets that I've found online but am striking out.

Answer 1

我想要做的是使用jquery遍历每个<a>标记

这是$()函数，它允许您使用CSS选择器查找元素：$("a")

“每个”部分有趣，each：.each(function() { ... })

检索标题

那是attr：.attr("title")。但是对于我们正在做的事情，我们可以使用DOM自己的title属性。

然后在每个<div class="title">titlegoeshere</div>标记关闭后将其打印到<a>。

“打印”在此上下文中是为文档创建和添加元素

您可以使用a different variant of the $() function创建一个接受HTML字符串的元素：$('<div class="title"></div>')
使用text设置文字：.text(thetitle)
使用insertAfter

所以：

$("a").each(function() {
    $('<div class="title"><div>')
        .text(this.title)
        .insertAfter(this);
});

上面的

this将是对与开始<a>搜索匹配的每个$("a")元素的引用。（不是围绕它的jQuery对象，原始DOM元素。）

在the jQuery API documentation中探索更多内容。值得花些时间从头到尾阅读。需要大约一个小时，也许两个小时，并立即支付给你。

Answer 2

获取页面的所有内容，并循环遍历它们。还要创建一个div元素并将其附加到元素

之后

jQuery("a").each(function (index,element){ 
 jQuery(this).after("<div class='title'>"+jQuery(this).attr("title")+"</div>");
});

jQuery（this）是循环的当前a

Answer 3

如果您只使用本机js，则可以使用getAttribute检索任何属性。这是一个演示

HTML

<a href="youtubevideo" class="fancybox" title="titlegoeshere">
    <img src="imggoeshere" />
</a>
<div class="content" id="content"></div>

JS

(function(){
var x= document.getElementsByClassName('fancybox')[0].getAttribute('title')
document.getElementById('content').innerHTML=x
}())

如果您使用的是jquery，可以使用.attr来检索

JS DEMO

修改

最初发布此问题时，它只有一个锚标记，因此我使用了document.getElementsByClassName。但后来问题被编辑并添加了多个锚标签。所以document.getElementsByClassName（＆＃39; somName＆＃39;）[0]数组不会工作，因为它只会选择第一个元素。

获取每个<a> tag and then append it in the containing div

3 个答案: