jQuery - Looping particular DIV and Transform

Question

Here is the current HTML code available. There might be multiple DIV with the class "ow_video_list_item ow_small".

<div class="ow_video_list_item ow_small">
   <a href="http://www.site1.com">
      <img src="http://img.youtube.com/vi/xVrJ8DxECbg/default.jpg">
   </a>

   <div class="ow_video_item_title">
      Site 1
   </div>
</div>

I want this HTML to be modified as found below.

<div class="ow_video_list_item ow_small">

   <img rel="xVrJ8DxECbg" src="http://img.youtube.com/vi/xVrJ8DxECbg/default.jpg">

   <div class="ow_video_item_title">
      <a href="http://www.site1.com">Site 1</a>
   </div>
</div>

PS: The format of the IMG src attribute will not change. The value "xVrJ8DxECbg" is the video ID of the video in Youtube.

@LuisTellez: I have got all the DIV with the class using each() function with the help of Google. I am not sure how to proceed to get the Video Id and transform te child DIV and remove the actual tag. Your help will be much useful as I am new to jQuery — Purus, Feb 26 '13 at 13:22

Meraj · Answer 1 · 2013-02-26T13:21:54.700

1

$($(".ow_video_list_item").find("div")).each(function(){
 // do watever you want with divs
});

edited Feb 26 '13 at 13:21

answered Feb 26 '13 at 13:11

Meraj

426
3
10
22

What I wanted is to transform the content by getting the video ID from SRC url. – Purus Feb 26 '13 at 13:20
1

then you need to get the anchor tag src property and then get URL paramameters and then rearrange the divs. to get URL params this link is usefull http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery – Meraj Feb 26 '13 at 13:27
Thanks @Meraj I have found the solution. – Purus Feb 27 '13 at 04:51

score 1 · Answer 2 · answered Feb 26 '13 at 15:01

This is the code that is working for me. Please suggest if there are any other better solution.

$( "div .ow_video_list_item").each(function(){
   $imgSrc = $(this).children("a").children("img").attr("src");
   $videoId = $imgSrc.split("/")[4]; 
   $videoLink = $(this).children("a").attr("href");
   $linkTitle = $(this).children("div .ow_video_item_title").text();

   $(this).children("a").empty(); 
   $(this).prepend('<img rel="' + $videoId + '" src="' + $imgSrc + '"/>');
   $(this).children("div .ow_video_item_title").empty().prepend
                  ('<a href="' + $videoLink + '">'+ $linkTitle + '</a>');
});

Thanks @LuisTellez . This is my first full fledged jQuery code. :) Thanks again. — Purus, Feb 27 '13 at 04:50

jQuery - Looping particular DIV and Transform

2 Answers2