javascript - 如何瞄准正确的 child ？

Question

我试图在点击它们各自的 add btn

后将整个 iframe 添加到数组中

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);
});

我打印出来的是:

undefinedundefinedundefinedundefinedundefinedundefined

Answer 1

在您的点击监听器中，您不需要each() 函数，您可以使用以下方法选择iframe html:

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

请看下面的演示:

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>