jQuery next() 在哪里使用它答案

【问题标题】：jQuery next() where to use itjQuery next() 在哪里使用它
【发布时间】：2013-10-06 11:48:12
【问题描述】：

当我点击链接时，我有以下功能来加载 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 代码的替代解决方案

【问题讨论】：

我想你在找.siblings()..
我已经更新了 .siblings() jsfiddle.net/bFhsS/13 你可以看看吗？好像不行

标签： javascript jquery next

【解决方案1】：

看来这就是你想要的

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

【讨论】：

请注意，您的下一个不应包含选择器，您应该在之后运行“.find”以进入子元素。另外-您的雅虎网址需要一个协议（最好检测非跨域网址，但我假设您没有保留雅虎，它将“X-Frame-Options”设置为“SAMEORIGIN”，不允许您的iframe 来显示它）。

【解决方案2】：

.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');
});

【讨论】：