在这里添加一个新元素，而不是在另一个元素之后。

Question

我为phpBB制作了一些BBcode，使用户可以以特定标签发布flickr图片。 每个帖子中的照片div都需要是唯一的，并且这些图片会随着帖子的加载而加载。

关于唯一的DIV，我无法找到一种方法，在插入BBcode的位置插入具有唯一名称的元素，然后再加载图片。看起来我不能在BBcode中使用PHP或模板标签。如果我能够轻松地从帖子ID和flickr标记创建唯一的照片元素，那就太好了。哦，我不能触及模板。所有内容都必须在BBcode中完成。 所以，这是我如何创建唯一标识符的方法：

 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" 中。

<div class = "content">

在用户发布区域下面有：

<div id="sig61789" class="signature">

我完全陷入困境的地方是，当我在没有$(this)链接参考的情况下，如何导航到prev()、closest()、parent()或其他任何地方。

所以，像这样的东西不应该行得通吗：

$(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>

- digitaltoast

---

如果您发布整个相关页面片段的代表性片段，有人可能可以提供帮助。从您上面写的内容很难确定页面结构的确切样子。 - Pointy

此外，当您尝试按类选择某些内容时，只需使用“div.post”即可，无需使用属性选择器。 - Pointy

谢谢，@pointy。我已经添加了更多细节。 - digitaltoast

不不不 - 你试图使用"[class^=post]"选择器查找的带有"class=post"类的<div>元素就是我所说的。你只需要使用".post"即可实现。 - Pointy

问题是，就像我说的那样，代码不知道文档中的“点”；它没有DOM中“位置”的概念。 - Pointy

Answer 1

问题在于您假设在脚本块内执行时 this 上下文是脚本块本身，这是不正确的。如果没有显式给定上下文，则上下文为 window DOM 元素。是否有任何理由不能将此代码移至页面级别，并在页面加载时初始化所有帖子？

$(function() {
    $('.post').each(function(i,item) {
        console.log(this); //Post DOM element. 
        //execute your flick retrieval code here.
    });
}

- Tyler Schroeder

---

啊啊啊啊啊啊啊！终于意识到过去12个小时的浪费，感谢你指出来。所以这并不意味着“这个”，我也学到了“live”并不意味着“现场直播”。我想知道是否有人整理了一份jquery函数列表，其中包含不符合其字面意义的函数名称？我会尝试你的函数 - 尽管当你说“在页面加载时初始化所有帖子”时，只有20个左右的帖子中有flickr图像；我会好好思考并在明天尝试解决它。谢谢！ - digitaltoast

@digitaltoast：add（我会将其命名为plus）或after（a.after(b)实际上是将b放在a之后）或closest，它是最接近的_parent_而不是最接近的_element_？实际上，它们都很自然，但如果你太字面理解名称，它们可能意味着完全不同的东西——短名称的危险，我想。 - configurator

@pointy - 谢谢你的建议。在你的帮助下，虽然经历了一些困难，但我现在知道了如何让用户在我们的论坛上发布图片。代码：http://pastebin.com/ZTyBreaR 适用于phpbb的BBCodes：http://www.phpbb.com/community/viewtopic.php?p=13009040#p13009040 演示：http://www.reading-forum.co.uk/forum/viewtopic.php?f=20&t=6536&p=63321#p63321。非常感谢所有相关人员。 - digitaltoast

Answer 2

你尝试过使用JavaScript的DOM函数来添加吗？ http://www.javascriptkit.com/javatutors/dom2.shtml

例如，要在当前ID为"script1"的脚本后插入：

document.getElementById("script1").parentNode.appendChild( newelement );

您可以添加原始HTML，只需设置新元素的innerHTML。

- NoBugs

---

但是，如果我能将唯一标识ID应用于脚本本身，那么我就不会有为ul元素生成ID的问题。除非我误解了，这难道不让我陷入了一个先有鸡还是先有蛋的境地吗？ - digitaltoast

你能否以<script>//id//</script>的形式启动脚本，其中//id//是一个唯一的标识，然后循环查找document.getElementsByTagName('script')[index].innerHTML，直到找到以该//id//开头的脚本？ - NoBugs