Добавление нового элемента ЗДЕСЬ, где код, а не после другого элемента - PullRequest
Новая
       34

Добавление нового элемента ЗДЕСЬ, где код, а не после другого элемента

3 голосов
/ 13 июня 2011

Сделано несколько BB-кодов для phpBB, чтобы позволить пользователям публиковать фотографии flickr с определенными тегами. Каждый div фотографии в теме должен быть уникальным, а изображения загружаются при загрузке темы.

Когда дело доходит до уникального DIV, я застрял в способе вставить элемент с уникальным именем в DOM в тот момент, когда вставлен BB-код, ПОТОМ загрузите фотографии. И кажется, что я не могу использовать PHP в BBcode или шаблонные теги - если бы я мог легко создать уникальный элемент фото из идентификатора записи и тега flickr, я бы посмеялся. О, и я не могу коснуться шаблона. Все это должно быть в BBcode. Итак, вот как я делаю уникальный идентификатор: 

 var flickrUser = "{URL}".split("/")[4];   
 var tag = "{URL}".split("/")[6];
 var photoDIV = flickrUser + "-" + "tag";

Или ... есть элемент с уникальным идентификатором поста чуть выше, который я мог бы использовать: 

<div id="p61789" class="post bg2">

Я пытался 

var postnumber=$(this).closest('div[class^="post"]').attr('id');

но всегда казалось, что на странице возвращается ПЕРВЫЙ совпадающий div, а не БЛИЖАЙШИЙ до точки BBcode. Этот элемент на два деления ниже 

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

Ответы [ 2 ]

1 голос
/ 13 июня 2011

проблема в том, что вы предполагаете, что контекст this при выполнении в блоке сценария является самим блоком сценария, что неверно.Если нет явно заданного контекста, то ваш контекст - это элемент window DOM.Есть ли причина, по которой вы не можете переместить этот код на уровень страницы и инициализировать все сообщения при загрузке страницы? 

$(function() {
    $('.post').each(function(i,item) {
        console.log(this); //Post DOM element. 
        //execute your flick retrieval code here.
    });
}
0 голосов
/ 13 июня 2011

Пробовали ли вы функции DOM Javascript, чтобы добавить его?http://www.javascriptkit.com/javatutors/dom2.shtml

Например, для вставки сразу после текущего скрипта с идентификатором "script1": 

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

Вы также можете добавить необработанный HTML, просто установив innerHTML для нового элемента.

...