1

单击链接时，我具有以下功能来加载 iFrames 内容。

我正在尝试实现 .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 代码的替代解决方案

4

2 回答 2

5

.next选择被选元素的紧邻下一个兄弟元素，即.slidingDiv元素（如果它与指定的选择器匹配），可以使用.find()和.next()方法：

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

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

$(this).nextAll('.slidingDiv').find('.myiFrame').attr('src', function(){
   return $(this).data('src');
});
于 2013-09-30T14:50:43.740 回答
0

看起来这就是你想要的

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="http://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="http://www.yahoo.com" src="about:blank"></iframe>  
    </div>
</div>

Javascript（jQuery）：

var slidingDivs = $(".slidingDiv");
$('.toggle-next-div').click(function () {
    var iframe = slidingDivs.next().find('.myiFrame');
    iframe.attr("src", iframe.data("src"));
});
于 2013-09-30T15:05:02.173 回答