JQuery Как добавить идентификатор в родительский div iframe со значением iframes id + «что угодно»?

Question

У меня есть этот 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>

Я хочу добавить идентификатор для каждого элемента div с классом Fluid-width-video-wrapper. Новое значение идентификатора должно начинаться с «Fluid», за которым следует значение iframe, вложенное в этот div.

Таким образом, результат будет выглядеть (конечно, без **, только для выделения):

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

Как мне это сделать?

Answer 1

Вы должны попробовать

.each

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

Answer 2

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

Answer 3

Почему бы не использовать дочерние селекторы и parent ()?

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

Answer 4

Вы можете найти каждый div с классом Fluid-width-video-wrapper, используя метод .each ().Затем вы найдете детей этого div, это ваш iframe и получите id iframe.Затем добавьте 'Fluid' к идентификатору iframe и сделайте его идентификатором вашего div.
Вот код.

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

Answer 5

что-то вроде этого. JSFiddler

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

Answer 6

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

Answer 7

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

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

  });
</script>

Это должно сделать это, вы можете использовать .next (), чтобы получить id следующего элемента, если вам нужно, чтобы он был на 100% динамичным.

См .:
Каждый - http://api.jquery.com/each/
Attr - http://api.jquery.com/attr/

Редактировать

---

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

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

  }); 
</script> 

Должна быть динамическая версия.