Question

I’m using Embedly to generate thumbnails and video previews from video sites. Here’s the code:

<ul id="galleryThumb">
  <li id="1"><a href="http://www.youtube.com/watch?v=wTcz-etqwKg" class="thumb">Video</a></li>
  <li id="2"><a href="http://www.youtube.com/watch?v=zVNTdWbVBgc" class="thumb">Video</a></li>
  <li id="3"><a href="http://www.youtube.com/watch?v=Q5im0Ssyyus" class="thumb">Video</a></li>
  <li id="4"><a href="http://www.youtube.com/watch?v=wCF3ywukQYA" class="thumb">Video</a></li>
</ul>

<script>
$(document).ready(function() {
$(".thumb").embedly({
        key : 'MY_KEY',
        className: "vidPreview"
    },
    function(oembed, dict) {
        if ( oembed == null)
            return;
        var output = "<a class='embedly' href='#'><img src='"+oembed.thumbnail_url+"' /></a>";
        output += oembed['code'];
        $(dict["node"]).parent().html(output);
    });
});
</script>

What it does is it replaces all the video links with thumbnail and a preview of the video. The video is enclosed with

<div class="vidPreview">

which is dynamically created, and the vidPreview is defined in the className.

What I want is to add an ID attribute to this dynamic element, in which I will also get the ID from <li> as part of the ID. Basically, the final output I want is this:

<div id="vidPreview-1" class="vidPreview">

In vidPreview-1 is from the ID of the <li>

Answer 1

Here’s my working code just in case anyone have the same situation:

$(".thumb").embedly({
    key : 'MY_KEY',
    className: "vidPreview"
},
function(oembed, dict) {
    if ( oembed == null) return;
    var test = $(dict["node"]).parent().attr("id");
    var output = "<a class='embedly' href='#'><img src='"+oembed.thumbnail_url+"' /></a>";
    output += oembed['code']; $(dict["node"]).parent().html(output).find("div").attr("id", "vidPreview-" + test);
});