javascript - jQuery next() 在哪里使用它

Question

当我点击链接时，我有以下函数来加载 iFrame 内容。

我正在尝试实现 .next 方法来一次加载一个 iFrame，而不是一起加载。

$('.toggle-next-div').click(function () {
var iframe = $(this).next('.myiFrame');
iframe.attr("src", iframe.data("src"));
});

HTML

<a href="#" class="toggle-next-div">Map</a>
<div class="slidingDiv">
    <div style="margin-top:0">
        <span style="float:left;font-weight:bold">title</span>
        <iframe class="myiFrame" data-src="www.yahoo.com" src="about:blank"></iframe>  
    </div>
</div>
<div class="slidingDiv">
    <div style="margin-top:0; margin-right:10px; margin-bottom:10px; text-align:right">
        <span style="float:left; font-weight:bold">title</span>
        <iframe class="myiFrame" data-src="www.yahoo.com" src="about:blank"></iframe>  
    </div>
</div>
//and so on...

next() 方法在我的 html 中不起作用，因此我需要针对此 html 代码的替代解决方案

Answer 1

.next 选择所选元素的直接下一个兄弟元素，即 .slidingDiv 元素(如果它与指定的选择器匹配) , 你可以使用 .find() 和 .next() 方法:

var iframe = $(this).next('.slidingDiv').find('.myiFrame');

如果您想选择所有下一个兄弟 .slidingDiv 元素的所有 .myiFrame 后代元素，您可以使用 .siblings() 或 .nextAll() 方法:

$(this).nextAll('.slidingDiv').find('.myiFrame').attr('src', function(){
   return $(this).data('src');
});