如何定位正确child？

Question

我试图在单击它们各自的 add btn[= 后将整个 iframe 添加到数组中15=]

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

这个呢？

$('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);
});

Answer 2

在您的 点击侦听器 中，您不需要 each() 功能，您可以 select 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>

如何定位正确child？

How to target correct child?

html

javascript

jquery

jquery-selectors