jQuery next()在哪里使用它

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元素(如果它与指定的选择器匹配),您可以使用.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');
});