CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
rob.m
rob.m

Reputation: 10571

How to target correct child?

I am trying to add the whole iframe to an array once I click on their respective add btn

HTML

<div class="col-sm-4">
   <div class="thumbnail">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/2tM1LFFxeKg" frameborder="0" allowfullscreen=""></iframe>
      </div>
    <div class="caption">
       <p>Duration: 
         <span class="video-time">4:20</span>
       </p>
       <button type="button" class="btn btn-danger btn-block btn_video">
         <strong>ADD</strong>
       </button>
    </div>
   </div>
</div>

<div class="col-sm-4">
   <div class="thumbnail">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/2tM1LFFxeKg" frameborder="0" allowfullscreen=""></iframe>
      </div>
    <div class="caption">
       <p>Duration: 
         <span class="video-time">4:20</span>
       </p>
       <button type="button" class="btn btn-danger btn-block btn_video">
          <strong>ADD</strong>
       </button>
    </div>
   </div>
</div>

JS

$('body').on('click', '.btn_video', function () {
  var urls = [];
  $('.btn_video').each(function () {
     urls.push($(this).parent().parent().parent().find(".thumbnail").closest(".embed-responsive").html());
  });
  var str = '';
  urls.forEach(function (url) {
    str += url;
  });
  $('#usp-custom-5').val(str);
});

What I am having printed out is:

undefinedundefinedundefinedundefinedundefinedundefined

Upvotes: 1

Views: 59

Answers (2)

kukkuz
kukkuz

Reputation: 42352

Inside your click listener you don't need the each() function and you can select the iframe html using this:

$(this).closest(".thumbnail").find(".embed-responsive")

See demo below:

var urls = [];
$('body').on('click', '.btn_video', function() {
  urls.push($(this).closest(".thumbnail").find(".embed-responsive").html());
  $('#usp-custom-5').text(urls.join(' '));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
  <div class="thumbnail">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/2tM1LFFxeKg" frameborder="0" allowfullscreen=""></iframe>
    </div>
    <div class="caption">
      <p>Duration:
        <span class="video-time">4:20</span>
      </p>
      <button type="button" class="btn btn-danger btn-block btn_video">
        <strong>ADD</strong>
      </button>
    </div>
  </div>
</div>

<div class="col-sm-4">
  <div class="thumbnail">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/2tM1LFFxeKg" frameborder="0" allowfullscreen=""></iframe>
    </div>
    <div class="caption">
      <p>Duration:
        <span class="video-time">4:20</span>
      </p>
      <button type="button" class="btn btn-danger btn-block btn_video">
        <strong>ADD</strong>
      </button>
    </div>
  </div>
</div>

<div id="usp-custom-5"></div>

Upvotes: 2

Serhat MERCAN
Serhat MERCAN

Reputation: 1098

What about this?

$('body').on('click', '.btn_video', function () {
  var urls = [];
  $('.btn_video').each(function () {
      urls.push($(this).closest(".thumbnail").find(".embed-responsive").html());
  });

  var str = '';
  urls.forEach(function (url) {
         str += url;
  });
  $('#usp-custom-5').val(str);
});

Upvotes: 0

Related Questions