首页 > 解决方案 > 使用“this”获取 div 中的子元素 - Jquery

问题描述

我在一个页面上有一堆 HTML 容器,当我循环获取每个“iframeHolder”时,我无法让持有者中的 iframe 向它传递一个属性。

我正在使用的脚本位于 HTML 下方,关于如何正确获取子元素并更新属性没有错误的任何建议?

  <div class="row iframeHolder>
    <div class="col-large col-centered position-relative">
      <div class="card mb-4 box-shadow">

          <iframe class="iframes">
            <p>Your browser does not support iframes.</p>
          </iframe>
      </div>
    </div>
  </div>



$('.iframeHolder').each(function() {
      var iframe = $(this, 'iframe');
      console.log(iframe);

      iframe.attr('src', `google.com`);  
});

标签: jqueryiframeattributeschildren

解决方案


看起来你只是颠倒了函数参数。上下文在选择器之后,而不是之前:

$('iframe', this);

例子:

$('.iframeHolder').each(function() {
  var iframe = $('iframe', this);
  iframe.attr('src', 'https://google.com');  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row iframeHolder">
  <div class="col-large col-centered position-relative">
    <div class="card mb-4 box-shadow">

      <iframe class="iframes">
        <p>Your browser does not support iframes.</p>
      </iframe>
    </div>
  </div>
</div>

(示例中的进一步编辑包括更正 HTML 中您没有关闭属性值的错字google.com并将代码本身仍然可以正常工作。我没有一个允许这样做的网站示例。)


推荐阅读