CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
suri
suri

Reputation: 363

JQuery How do I add an id to the parent div of an iframe with the value of iframes id + "whatever"?

I have this html

<div id="cont">
<div id="videowrapper" class="fitmein">
<div id="vimeoposition" style="display: block;">
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
<iframe id="player1" class="vimeo" src="http://player.vimeo.com/blablabla">
</div>
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
<iframe id="player2" class="vimeo" src="http://player.vimeo.com/blablabla">
</div>
</div>
</div>

I want to add now an id to each div with the fluid-width-video-wrapper class. The new ids value should begin with "fluid" followed by the value of iframe id nested in that div.

So the result would look like (of course without the **s, just for highlighting):

<div **id="fluidplayer1"** class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
<iframe **id="player1"** class="vimeo" src="http://player.vimeo.com/blablabla">
</div>
<div **id="fluidplayer2"** class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
<iframe **id="player2"** class="vimeo" src="http://player.vimeo.com/blablabla">
</div>

How do I do that?

Upvotes: 1

Views: 1685

Answers (7)

user5397407
user5397407

Reputation: 1

<script type="text/javascript">
    window.onload = function() {
        var frame = document.getElementById("frame1");
        var win =  frame.contentWindow;
        win.showMessage("Hello from Main Page in iFrame");
    };    
</script>

Upvotes: 0

Travis
Travis

Reputation: 492

Why not make use of child selectors and parent()?

$('.fluid-width-video-wrapper > iframe').each(function(){
  $(this).parent().attr("id", "fluid" + $(this).attr('id')); 
});

Upvotes: 0

mesimplybj
mesimplybj

Reputation: 639

You can find out each div with the fluid-width-video-wrapper class by using .each() method. Then you find the children of that div, that is your iframe and get the id of the iframe. Then append 'fluid ' to the id of the iframe and make it id of your div.
Here is the code. 

$('.fluid-width-video-wrapper').each(function() {
    var divID = $(this).children('iframe').attr("id");
    $(this).attr('id', 'fluid' + divID);
});

Upvotes: 0

Ravi Gadag
Ravi Gadag

Reputation: 15861

some thing like this . JSFiddler

$('iframe').each(function(){
  var divObj = $(this).parent('div').attr('id',$(this).attr('id') + 1)
      alert($(divObj).attr('id'));
});

Upvotes: 0

Aleks
Aleks

Reputation: 410

You should try the

.each

$('.fluid-width-video-wrapper').each(function() {
   var player = $(this).children().attr("id");
   $(this).attr('id', 'fluid'+player);
});

Upvotes: 1

Sandeep Manne
Sandeep Manne

Reputation: 6092

$(".classname").each(function(count){$(this).attr("id","new-id"+count)});

Upvotes: 0

RemarkLima
RemarkLima

Reputation: 12037

<script type="text/javascript">
  $(function() {

      $(".fluid-width-video-wrapper").each(function(index) {
          $(this).attr("id","fluidplayer" + index);
      });

  });
</script>

That should do it, you could use a .next() to get the id of the next element if you needed it to be 100% dynamic.

See:
Each - http://api.jquery.com/each/
Attr - http://api.jquery.com/attr/

Edit

<script type="text/javascript"> 
  $(function() { 

      $(".fluid-width-video-wrapper").each(function(index) { 
          $(this).attr("id","fluid" + $(this).children("iframe").attr("id")); 
      }); 

  }); 
</script>

Should be the dynamic version.

Upvotes: 0

Related Questions