为 phpBB 制作了一些 BBcode 以允许用户发布带有特定标签的 flickr 图片。 线程中的每个照片 div 都需要是唯一的,并且在加载线程时加载图像。
当涉及到独特的 DIV 时,我一直在想办法在插入 BBcode 时将唯一命名的元素插入到 DOM 中,然后加载图片。看来我不能在 BBcode 中使用 PHP,也不能使用模板标签 - 如果我可以轻松地从帖子 ID 和 flickr 标签制作一个独特的照片元素,我会大笑。哦,我不能碰模板。这一切都必须在 BBcode 内。 因此,这是我制作唯一 ID 的方法:
var flickrUser = "{URL}".split("/")[4];
var tag = "{URL}".split("/")[6];
var photoDIV = flickrUser + "-" + "tag";
或者...在我可能会使用的正上方有一个带有唯一帖子 ID 的元素:
<div id="p61789" class="post bg2">
我试过了
var postnumber=$(this).closest('div[class^="post"]').attr('id');
但它似乎总是返回页面上第一个匹配的 div,而不是 BBcode 点的最近的。这个元素是下面的两个“div”
<div class = "content">
在用户发帖区下方有:
<div id="sig61789" class="signature">
所以我完全卡住的地方是导航到 prev() 或 closest() 或 parent() 或实际上从我所在的位置开始的任何地方而没有 $(this) 链接引用。
所以不应该是这样的:
$(this).prev('content').html('<ul class="thumbs" id=photoDIV></ul>');
甚至
$(this).html('<ul class="thumbs" id=photoDIV></ul>');
工作?每当我认为我了解 jquery 时,一切又变得模糊了......
编辑:为 Pointy 添加了更多细节:
<div id="p63167" class="post bg2 online">
<div class="inner">
<span class="corners-top">
<span></span>
</span>
<div class="postbody">
<ul class="profile-icons">
<li class="edit-icon">
<a href="posting.php" title="Edit post">
<span>Edit post</span>
</a>
</li>
<li class="delete-icon">
<a href="posting.php" title="Delete post">
<span>Delete post</span>
</a>
</li>
<li class="report-icon">
<a href="report.php" title="Report this post">
<span>Report this post</span>
</a>
</li>
<li class="info-icon">
<a href="mcp.php" title="Information">
<span>Information</span>
</a>
</li>
<li class="quote-icon">
<a href="posting.php" title="Reply with quote">
<span>Reply with quote</span>
</a>
</li>
</ul>
<h3 class="first">
<a href="#p63167">Re: Testing new bbcode - ignore</a>
</h3>
<p class="author">
<a href="viewtopic.php">
<img src="" alt="Post" title="Post" />
</a>by
<strong>
<a href="memberlist.php">xxx</a>
</strong>» 13 Jun 2011 14:33</p>
<div class="content">
<script>var
APIkey="xxx";head.js("/forum/jflickrfeed/jflickrfeed.min.js","http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js",function(){var
flickrUser="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[4];var
tag="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[6];var
photoDIV=flickrUser+"-"+"tag";$(this).html('
<ul class="thumbs" id="photoDIV">
</ul>');$.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?",{method:"flickr.urls.lookupUser",url:"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/",format:"json",api_key:APIkey},function(data){$('#cbox').jflickrfeed({limit:30,qstrings:{id:data.user.id,tags:tag},itemTemplate:'
<li>'+'
<a rel="colorbox" href="{{image}}" title="{{title}}">'+'
<img src="{{image_m}}" alt="{{title}}" />'+'</a>'+'</li>'},function(data){$('#cbox
a').colorbox();});});$.lazy([{src:'/forum/jflickrfeed/colorbox/colorbox/jquery.colorbox-min.js',name:'colorbox',dependencies:{css:['/forum/jflickrfeed/jflickrfeed.css','/forum/jflickrfeed/colorbox/example1/colorbox.css']}}]);});</script>
<ul id="cbox" class="thumbs"></ul>
</div>
<div id="sig63167" class="signature"></div>
</div>
</div>
</div>
最佳答案
问题是您假设在脚本 block 内执行时的 this
上下文是脚本 block 本身,这是不正确的。如果没有明确给出上下文,那么您的上下文就是 window
DOM 元素。有什么理由不能将此代码移动到页面级别,并在页面加载时初始化所有帖子?
$(function() {
$('.post').each(function(i,item) {
console.log(this); //Post DOM element.
//execute your flick retrieval code here.
});
}
关于javascript - 在代码所在的位置添加新元素,而不是在另一个元素之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6333061/