Question

点击链接时，我有以下功能来加载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代码

Answer 1

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

.next()

如果您要选择所有下一个同级var iframe = $(this).next('.slidingDiv').find('.myiFrame');元素的所有.myiFrame后代元素，您可以使用.slidingDiv或.siblings()方法：

.nextAll()

Answer 2

看起来这就是你想要的

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

jQuery next（）在哪里使用它

2 个答案: