为什么在我的jQuery中无法使用下一个'div'?
我有以下jQuery,确实找到ASP.NET服务器控件(通过在块内放置alert()进行测试),但它不会使用.next()在DOM中设置下一个DIV的高度。但是,如果我使用直JS来做同样的事情,直接调用DIV它可以正常工作。为什么在我的jQuery中无法使用下一个'div'?
我想要做的不是使用DIV的硬编码ID,以防万一它改变,而是走动DOM动态地到达元素并设置高度。
所以1:
<div id="WebViewer" style="height:100%;width:100%;margin-right: 0px">
<input name="WebViewerReportReceipt" type="hidden"/>
<input name="WebViewerViewerType" type="hidden"/>
<DIV id="WebViewer_controlDiv">
<iframe src="295769102_1619997395_16141400_2120403583/CacheItem" style="width:100%;height:100%;"></iframe>
</DIV>
</div>
下一页非工作jQuery的,我认为应该工作:什么我试图操纵HTML源
//Using the 'DIV' that is created by the viewer (at runtime), resize it dynamically to fit the window
var myHeight = $(window).height();
if ($('#<%=WebViewer.ClientID %>') != null) {
$('#<%=WebViewer.ClientID %>').next('div').height(myHeight - 10);
}
最后是JS那确实工作,但我不希望通过硬编码ID访问该DIV,而是使用jQuery代替:
var myHeight = $(window).height();
//Using the 'DIV' that is created by the viewer (at runtime), resize it dynamically to fit the window
if (document.getElementById('WebViewer_controlDiv') != null) {
document.getElementById('WebViewer_controlDiv').style.height = myHeight - 10;
}
关于为什么在jQuery中走DOM以获取'next'div并设置其高度的任何想法都不起作用?
谢谢!
我猜$('#<%=WebViewer.ClientID %>')
在你的if语句是指<div id="WebViewer"
?
如果是这样,next()
将无法正常工作,因为它看起来在未来兄弟,而不是下一个孩子
因此,尝试这样的事:
var myHeight = $(window).height();
if ($('#<%=WebViewer.ClientID %> div:first').length) {
$('#<%=WebViewer.ClientID %> div:first').height(myHeight - 10);
}
这里是运行一个的jsfiddle代码(略作修改以适用于此): http://jsfiddle.net/xT7rx/
您应该使用.length
来检查元素是否存在,而不是!= null
就HTML而言,它可能是“下一个”,但就DOM而言,它不是“下一个”。相反,它是一个孩子。
你可能想是这样的:
$(element).find('div:first');
但是请注意,有一些问题,你的代码。举例来说,这将始终传递:
if ($('#<%=WebViewer.ClientID %>') != null) {
您需要检查选择的length
属性,而不是因为即使是空的jQuery选择的计算结果为布尔true
。
jQuery的.next()选择器获取下一个兄弟,但我不认为你想这样做。你需要的'parent > child' selector,像
$('#<%=WebViewer.ClientID %>' > 'div').height(myHeight - 10);